Skip to content

4.4.0 Update to vue-cli@4

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

在新版本中将原来的 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_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：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

Assets 2
Loading