// vue.config.js
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
outputDir: 'dist',
assetsDir: 'assets',
indexPath: 'index.html',
filenameHashing: true,
pages: {
index: {
entry: 'src/index/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 可以在这里添加更多页面配置
},
lintOnSave: process.env.NODE_ENV !== 'production',
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: false,
// 配置webpack-bundle-analyzer插件
configureWebpack: process.env.NODE_ENV === 'production'
? {
plugins: [
new BundleAnalyzerPlugin({
generateStatsFile: true, // 是否生成stats.json文件
statsOptions: {
source: false // 不包含源代码内容
}
})
]
}
: {},
// 配置chainWebpack自定义规则
chainWebpack: config => {
config.module
.rule('js')
.include
.add(/some-third-party-library/) // 添加需要处理的第三方库目录
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改babel-loader选项
return options;
});
},
// 配置devServer
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
},
// 其他配置...
};
这个示例展示了如何在vue.config.js
中配置Vue CLI项目的一些常用选项,包括基本的打包输出配置、页面配置、源码检查、webpack配置调整以及开发服务器设置。同时,它也演示了如何在生产环境中使用BundleAnalyzerPlugin
插件分析打包后的文件分布。