在新版本中将原来的vue-cli@3 升级为vue-cli@4。
主要是为了解决：

• npm run dev 会自动开两个 tab#2944
• npm run build:prod 页面白屏的问题#3271

vue-cli 升级也非常简单，基本无需自己操作说明， 可参照https://cli.vuejs.org/migrating-from-v3/

1. 安装 最新版本@vue/cli

npm install -g @vue/cli# ORyarn global add @vue/cli

2. 然后执行

vue upgrade

脚本就会自动帮你进行升级

⚠️ Breaking Changes

有一点需要额外注意，在新版本中废弃了通过VUE_CLI_BABEL_TRANSPILE_MODULES来控制懒加载

废弃原因

在vue-cli@3时代，使用VUE_CLI_BABEL_TRANSPILE_MODULES是 ok 的，但其实也是脆弱的，就比如在vue-cli@4时，vue-cli 引入babel-plugin-dynamic-import-node的逻辑就发生了变化，需要VUE_CLI_BABEL_TRANSPILE_MODULES和VUE_CLI_BABEL_TARGET_NODE同时为 true 时才会生效，所以只要 vue-cli 的判断逻辑发生了变化，我们都需要做相对应的改动，或非常被动和耦合。所以我们在vue-cli@4版本中，不再通过VUE_CLI_BABEL_TRANSPILE_MODULES:true来设置，而是通过手动引入'babel-plugin-dynamic-import-node'的方式，具体见下一部分。

vue-cli@4

1. 在.env.development文件中不在需要配置VUE_CLI_BABEL_TRANSPILE_MODULES = true，删除即可。

2. 在命令行执行npm install babel-plugin-dynamic-import-node -S -D

3. 在babel.config.js 中添加插件

module.exports={presets:['@vue/cli-plugin-babel/preset'],env:{development:{plugins:['dynamic-import-node']}}}

具体 commit：2ea998f

Upgrade the originalvue-cli @ 3 tovue-cli @ 4 in the new version.
Mainly to solve:

-npm run dev will automatically open two tags#2944 -npm run build: white screen issue on prod page#3271

The upgrade ofvue-cli is also very simple, basically you don’t need to operate your own instructions, you can refer tohttps://cli.vuejs.org/migrating-from-v3/

1. Install the latest version@vue/cli

npm install -g @vue/cli# ORyarn global add @vue/cli

2. Then execute

vue upgrade

The script will automatically upgrade for you

⚠️ Breaking Changes

One thing needs extra attention. In the new version, the control of lazy loading viaVUE_CLI_BABEL_TRANSPILE_MODULES is abandoned.

Elimination reason

In the era ofvue-cli@3, usingVUE_CLI_BABEL_TRANSPILE_MODULES is ok, but it is actually fragile, as invue-cli@4, vue-cli introducesbabel-plugin-dynamic-import-node The logic ofhas changed, it needs to beVUE_CLI_BABEL_TRANSPILE_MODULES andVUE_CLI_BABEL_TARGET_NODE to be true at the same time, so as long as the judgment logic of vue-cli changes, we need to make corresponding changes, or be very passive and coupled . So in thevue-cli@4 version, we no longer set it byVUE_CLI_BABEL_TRANSPILE_MODULES: true, but by manually introducing'babel-plugin-dynamic-import-node', see the next section for details.

vue-cli@4

1. No need to configureVUE_CLI_BABEL_TRANSPILE_MODULES = true in the.env.development file, just delete it.

2. Runnpm install babel-plugin-dynamic-import-node -S -D

3. The way to add the dynamic-import-node plugin inbabel.config.js, see the next section for details.

module.exports={presets:['@vue/cli-plugin-babel/preset'],env:{development:{plugins:['dynamic-import-node']}}}

Detail commit：2ea998f