在新版本中将原来的 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:https://github.com/PanJiaChen/vue-element-admin/pull/3028/commits/2ea998f91d889480821468de86df9bf8defbb5f0


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 https://github.com/PanJiaChen/vue-element-admin/issues/2944 -npm run build: white screen issue on prod page https://github.com/PanJiaChen/vue-element-admin/issues/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:https://github.com/PanJiaChen/vue-element-admin/pull/3028/commits/2ea998f91d889480821468de86df9bf8defbb5f0

项目简介

🚀 Github 镜像仓库 🚀

源项目地址

https://github.com/PanJiaChen/vueadmin-template

发行版本 10

4.4.0 Update to vue-cli@4

全部发行版

贡献者 12

全部贡献者

开发语言

  • JavaScript 51.6 %
  • Vue 39.6 %
  • SCSS 8.1 %
  • HTML 0.7 %