Skip to content

4.4.0 Update to vue-cli@4

Latest
Compare
Choose a tag to compare
@PanJiaChen PanJiaChen released this 21 Jun 14:01
· 12 commits to master since this release

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

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

  1. 安装 最新版本@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
  1. 然后执行
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_MODULESVUE_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:PanJiaChen/vue-element-admin@2ea998f


Upgrade the original vue-cli @ 3 to vue-cli @ 4 in the new version.
Mainly to solve:

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

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

  1. Install the latest version @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
  1. 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 via VUE_CLI_BABEL_TRANSPILE_MODULES is abandoned.

Elimination reason

In the era of vue-cli@3, using VUE_CLI_BABEL_TRANSPILE_MODULES is ok, but it is actually fragile, as in vue-cli@4, vue-cli introduces babel-plugin-dynamic-import-node The logic ofhas changed, it needs to be VUE_CLI_BABEL_TRANSPILE_MODULES and VUE_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 the vue-cli@4 version, we no longer set it by VUE_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 configure VUE_CLI_BABEL_TRANSPILE_MODULES = true in the .env.development file, just delete it.

  2. Run npm install babel-plugin-dynamic-import-node -S -D

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

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

Detail commit:PanJiaChen/vue-element-admin@2ea998f