vue2 项目升级到vue3之后`npm run build`执行两遍打包

vue2 项目升级到vue3之后npm run build执行两遍打包

实际是在 @vue/cli-service升级到5.0版本之后出现的问题

先说解决方法

两种办法

1. 执行 build 的时候加一个 --no-module

 vue-cli-service build --no-module 

1. 修改 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