vue-element-admin 4.4.0 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和
element。它使用了最新的前端技术栈,内置了 i18
国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。
在新版本中将原来的 vue-cli@3 升级为 vue-cli@4 。
主要是为了解决:
npm run dev 会自动开两个 tab #2944npm run build:prod 页面白屏的问题 #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
脚本就会自动帮你进行升级
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:2ea998f
更新说明:https://github.com/PanJiaChen/vue-element-admin/releases/tag/4.4.0 |