4.4.0
版本发布时间: 2020-06-21 21:42:12
PanJiaChen/vue-element-admin最新发布版本:4.4.0(2020-06-21 21:42:12)
在新版本中将原来的 vue-cli@3
升级为 vue-cli@4
。
主要是为了解决:
-
npm run dev
会自动开两个 tab https://github.com/PanJiaChen/vue-element-admin/issues/2944 -
npm run build:prod
页面白屏的问题 https://github.com/PanJiaChen/vue-element-admin/issues/3271
vue-cli
升级也非常简单,基本无需自己操作说明, 可参照 https://cli.vuejs.org/migrating-from-v3/
- 安装 最新版本
@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 然后执行
vue upgrade
脚本就会自动帮你进行升级
:warning: 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
-
在
.env.development
文件中不在需要配置VUE_CLI_BABEL_TRANSPILE_MODULES = true
,删除即可。 -
在命令行执行
npm install babel-plugin-dynamic-import-node -S -D
-
在
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/
- Install the latest version
@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- Then execute
vue upgrade
The script will automatically upgrade for you
:warning: 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 of
has 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
-
No need to configure
VUE_CLI_BABEL_TRANSPILE_MODULES = true
in the.env.development
file, just delete it. -
Run
npm install babel-plugin-dynamic-import-node -S -D
-
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