vue-element-admin 4.4.0 发布，后台集成方案

vue-element-admin 4.4.0 发布了，vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

在新版本中将原来的 vue-cli@3 升级为 vue-cli@4。

主要是为了解决：

• npm run dev 会自动开两个 tab #2944
• npm run build:prod 页面白屏的问题 #3271

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

1. 安装 最新版本@vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. 然后执行

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：2ea998f

更新说明：https://github.com/PanJiaChen/vue-element-admin/releases/tag/4.4.0