vue2 项目升级到vue3之后npm run build执行两遍打包
vue2 项目升级到vue3之后npm run build执行两遍打包
实际是在
@vue/cli-service升级到5.0版本之后出现的问题
先说解决方法
两种办法
- 执行
build的时候加一个--no-module
vue-cli-service build --no-module
- 修改
browserslist，一般在package.json中或者单独的.browserslistrc文件中，添加一个not ie 11
package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
.browserslistrc
> 1%
last 2 versions
not dead
not ie 11
分析原因
通过执行 npm run build 的时候打印的日志可以发现两次打包之前都输出了不一样的日志
Building legacy bundle for production...
Building module bundle for production...
正常只执行一次的打包只会输出一种日志
Building for production...
然后我们根据日志输出的关键字在 @vue/cli-service 项目中查找一下，我们执行的是 build 命令，所以先看这个命令的文件 @vue/cli-service/lib/commands/build/index.js，搜索一下关键字 legacy bundle 会查找到第 116 行
if (args.target === 'app') {
const bundleTag = args.needsDifferentialLoading
? args.moduleBuild
? `module bundle `
: `legacy bundle `
: ``
logWithSpinner(`Building ${bundleTag}for ${mode}...`)
}
发现当 args.needsDifferentialLoading 为 true 的时候就会出现打包两次所出现的日志，所以基本可以肯定问题出在这个上，继续找一下它的复制，往上查找，在67行发现了赋值语句
args.needsDifferentialLoading = needsDifferentialLoading
继续查找 needsDifferentialLoading 变量声明和赋值的地方，往上看就可以看到
const { allProjectTargetsSupportModule } = require('../../util/targets')
let needsDifferentialLoading = args.target === 'app' && args.module
if (allProjectTargetsSupportModule) {
log(
`All browser targets in the browserslist configuration have supported ES module.\n` +
`Therefore we don't build two separate bundles for differential loading.\n`
)
needsDifferentialLoading = false
}
needsDifferentialLoading 初始值如果 args.module 是 false 的话就是 false
在正常的项目开发中
arr.target的值一定是app，如果开发的是插件的话，那么一般在打包的时候会指定--target lib
还有就是如果 allProjectTargetsSupportModule 这个值是true的话， needsDifferentialLoading 会被手动赋值成 false ，于是我们发现了两个可以让 needsDifferentialLoading 是 false 的方法
–no-module的原理
先查找 args.module 的复制，会发现没有直接的赋值，args是整个回调函数的参数，而且在下面还给 args中没有的部分值，附上了默认参数，第23行
api.registerCommand('build', {
description: 'build for production',
usage: 'vue-cli-service build [options] [entry|pattern]',
options: {
// ...
'--no-module': `build app without generating