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

Upgrade the originalvue-cli @ 3 tovue-cli @ 4 in the new version.
Mainly to solve:

-npm run dev will automatically open two tags#2944 -npm run build: white screen issue on prod page#3271

The upgrade ofvue-cli is also very simple, basically you don’t need to operate your own instructions, you can refer tohttps://cli.vuejs.org/migrating-from-v3/

1. Install the latest version@vue/cli

npm install -g @vue/cli# ORyarn global add @vue/cli

2. 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 viaVUE_CLI_BABEL_TRANSPILE_MODULES is abandoned.

Elimination reason

In the era ofvue-cli@3, usingVUE_CLI_BABEL_TRANSPILE_MODULES is ok, but it is actually fragile, as invue-cli@4, vue-cli introducesbabel-plugin-dynamic-import-node The logic ofhas changed, it needs to beVUE_CLI_BABEL_TRANSPILE_MODULES andVUE_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 thevue-cli@4 version, we no longer set it byVUE_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 configureVUE_CLI_BABEL_TRANSPILE_MODULES = true in the.env.development file, just delete it.

2. Runnpm install babel-plugin-dynamic-import-node -S -D

3. The way to add the dynamic-import-node plugin inbabel.config.js, see the next section for details.

module.exports={presets:['@vue/cli-plugin-babel/preset'],env:{development:{plugins:['dynamic-import-node']}}}

Detail commit：2ea998f

🎉 新功能

• 侧边栏 icon 支持 el-icon，在声明路由时直接使用 icon class 即可，例如：

meta:{title:'Example',icon:'example'icon:'el-icon-s-help'//demo},

🐛 修复

• 修复param2Obj 函数在参数中出现== 时的 bug (#3100 by@mayunhai)
• 修复v-permission 不支持动态设置权限的 bug (#3251)

✨ 优化

• chore: 在 webpack 构建时开启preload，提高首页加载速度(0bf61aa)
• refactor: 修改所有 mock 文件为 commonjs，移除@babel/register(d3bd933)
• 移除package.json 中没有依赖到的showdown (7702b3d by@Silentdoer)
• 更新element-ui 至 2.13.2 版本

🎉 Features

• The sidebar icon supports el-icon, just use the icon class when declaring the route, for example:

meta:{title:'Example',icon:'example'icon:'el-icon-s-help'//demo},

🐛 Bugs

• Fix the bug whenparam2Obj function appears with== in the parameter (#3100 by@mayunhai)
• Fix the bug thatv-permission does not support setting permissions dynamically (#3251)

✨ Optimization

• chore: Turn onpreload during webpack build to increase the homepage loading speed(0bf61aa)
• refactor: Modify all mock files to commonjs, remove@babel/register(d3bd933)
• Removeshowdown which is not dependent onpackage.json (7702b3d by@Silentdoer)
• Updateelement-ui to version 2.13.2

⚠️ Breaking Changes

chore: change node-sass to dart-sass(#3040 by@Cat7373 )

/deep/ 已不适用，需要使用::v-deep进行替换

在v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖libsass，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。

所以为了解决这个问题，本项目在v4.3.0修改为dart-sass进行构建，它能在保证性能的前提下大大简化用户的安装成本。通过这个issue下面相关的评论就可以知道，安装node-sass 是多么麻烦的一件事。

这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于libsass的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。

目前vue-cli在选择sass预处理的时候也会默认优先使用dart-scss，相关pr

相关的说明可以见该篇文章：Announcing Dart Sass

具体dart-sass性能评测可见：Perf Report

升级方案

升级也非常的简单，只需要两个步骤

npm uninstall node-sassnpm install sass -S -D

具体可见该：Pull Request

不兼容

替换node-sass 之后有一个地方需要注意，就是它不再支持之前sass 的那种/deep/ 写法，需要统一改为::v-deep 的写法。相关：issue

具体 demo：

.a {/deep/ {    .b {color: red;    }  }}/* 修改为 */.a {  ::v-deep {    .b {color: red;    }  }}

不管你是否使用dart-sass，我都是建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass/deep/的写法。而且它还是vue 3.0 RFC 中指定的写法。

而且原本/deep/ 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用/deep/的警告。

更多：scope css 写法

⚠️ Breaking Changes

chore: change node-sass to dart-sass(#3040 by@Cat7373 )

/deep/ is no longer applicable, it needs to be replaced with::v-deep

Beforev4.3.0, this project was built based onnode-sass, butnode-sass low-level dependencieslibsass, resulting in many users installing Especially difficult for Windows users, it forces users to installpython2 andVisual Studio in thewindows environment to compile successfully.

So in order to solve this problem, this project was modified to builddart-sass inv4.3.0, it can guarantee performance Under the premise of greatly simplifying the user's installation costs. Through thisissue the relevant comments below can be known, install` Node-sass is such a troublesome thing.

There is a more important reason for choosing to use dart-sass here. Officially,sass has taken dart-sass as the main development direction in the future. Any new features will be supported first, and it It has been running steadily in the community for a long time, and there are basically no pits. The main reason why dart-sass is easy to install is because it will be compiled into pure js, so that it can be used directly in the node environment. Although its running speed will be slower than that based onlibsass, the difference in these speeds is almost negligible. The entire community is now embracingdart-sass, and we have no reason to refuse! And it does greatly simplify the user's installation costs.

Currently,vue-cli will also prefer to usedart-scss by default when selectingsass preprocessing, related:pr

Related instructions can be found in this article:Announcing Dart Sass

Specificdart-sass performance evaluation can be seen:Perf Report

Upgrade plan

The upgrade is also very simple, requiring only two steps

npm uninstall node-sassnpm install sass -S -D

The upgrade can also be seen in detail:Pull Request is simple and only requires two steps

Not compatible

One thing to note after replacingnode-sass is that it no longer supports the/deep/ writing style ofsass before, and it needs to be changed to the writing style of::v-deep. Related:issue

Concrete demo:

.a {/deep/ {    .b {color: red;    }  }}/* change into */.a {  ::v-deep {    .b {color: red;    }  }}

Regardless of whether you usedart-sass or not, I suggest you use::v-deep notation, which is not only compatible with the css>>> notation, but also compatible with sass/deep/ . And it's the way of writing specified invue 3.0 RFC.

And the original writing of/deep/ itself was abandoned by Chrome. You can often find a warning in the console that Chrome reminds you not to use/deep/.

More:scope css writing

🎉 新功能

• 新增plop store 模板，一键创建空 store 模板文件 (#2805 by@monkeycf)
• 新增 在线CodeSandbox，在线运行代码 (#2976)

🐛 修复

• 修复autocomplete 拼写错误 (#2191 by@mgbq)
• 修复Dashboard debounce bug (#2597 by@mayunhai)
• 修复 登出时TagsView没有清除的 bug (#2632)
• 修复 若干TagsViewbug (#2634,#2649)
• 修复Charts在被keep-alive后，resize 的 bug (#2922)
• 修复UserCard 中的拼错误 (#3056 by@echofly)
• 修复parseTime函数在Safari中的 bug (#3066 by@aisen60)
• 修复parseTime函数在在传入空值时的 bug (#3038 by@c-f-cooper)

✨ 优化

• 默认请求不开启withCredentials，有跨域需求的请自行设置 (9538d1b)
• 升级axios 版本，修复安全漏洞 (018c20a)
• 升级element-ui 至2.13.0版本
• 增加jsconfig.json 文件，以便让编辑器支持文件点击跳转 (#2609 by @FrancisSano)
• 优化file-saver 的引入方式，通过import 的方式引入 (#2347 by @gaoshijun1993)
• 优化若干代码写法 (#2720,#2725,#2733,#2732,#2739,#2744,#2791 by@thaycacac)
• 优化登出按钮的可点击区域 (#2896) by@wangshantao)
• 优化mock-server (#2966 by@roblues)
• 在开发环境中使用vue-cli 默认的source-map以提高编译速度 (#3097)
• 优化TagsView，当滚动时隐藏右键按钮 (#3118 by@AIME1991)

📖 文档

• docs: improve Japanese translation (#2970 by@artn)
• docs: Improve read me files and changes in Spanish (#3234 by@EdwinBetanc0urt)

🎉 Features

• Addedplop store template (#2805 by@monkeycf)
• AddedCodeSandbox, could run code online (#2976)

🐛 Bugs

• Fix spelling error ofautocomplete (#2191 by@mgbq)
• FixDashboard debounce bug (#2597 by@mayunhai)
• Fix the bug thatTagsView was not cleared when logging out (#2632)
• Fix severalTagsView bugs (#2634,#2649)
• Fix "Charts" resize bug after being "keep-alive" (#2922)
• Fix misspelling inUserCard (#3056 by@echofly)
• Fix bug ofparseTime function inSafari (#3066 by@aisen60)
• Fix bug ofparseTime function when passing null value (#3038 by@c-f-cooper)

✨ Optimization

• The default request does not enablewithCredentials, please set it yourself if you have cross-domain requirements (9538d1b)
• Upgradeaxios version, fix security holes (018c20a)
• Upgradeelement-ui to2.13.0 version
• Addjsconfig.json file to let the editor support file click and jump (#2609 by @FrancisSano)
• Optimize the way of importingfile-saver, importing throughimport (#2347 by @gaoshijun1993)
• Optimized some code writing (#2720,#2725,#2733,#2732,#2739,#2744,#2791 by@thaycacac)
• Optimized the clickable area of ​​the logout button (#2896) by@wangshantao)
• Optimizedmock-server (#2966 by@roblues)
• Usevue-cli defaultsource-map in development environment to improve compilation speed (#3097)
• OptimizedTagsView, hide right button when scrolling (#3118 by@AIME1991)

📖 文档

• docs: improve Japanese translation (#2970 by@artn)
• docs: Improve read me files and changes in Spanish (#3234 by@EdwinBetanc0urt)

🐛 修复

• 修复 charts 图表 在keep-alive中的 bug(#2119)
• 修复 同时引用多个 Tinymce 富文本 时的 bug(#2152)

✨ 优化

• 添加autoprefixer 到devDependencies，避免有些情况下漏装的问题(#2097 by@bpzhang )
• 优化request.js 的错误处理 (#2160 @gaoshijun1993 )
• dev proxy 的 target 修改为127.0.0.1，避免修改了localhost的指向后，代理失效的问题(#2142)
• Tinymce 富文本增加language 选项(#2159)

🐛 Bugs

• Fixed bug when charts inkeep-alive (#2119)
• Fixed bug when init multiple tinymces at the same time (#2152)

✨ Optimization

• Addautoprefixer todevDependencies to avoid the problem of missing(#2097 by@bpzhang )
• Optimized error handling forrequest.js (#2160 @gaoshijun1993 )
• The target of the dev proxy is modified to127.0.0.1, to avoid some people modifying thelocalhost pointer, the proxy is invalid(#2142)
• Tinymce addlanguage option(#2159)

🎉 新功能

• 新增 Spanish 文档 (#2070 by@yamelsenih )
• vuex store 自动导入时支持嵌套文件夹 (#2047 by@yamelsenih )
• svg 组件支持 通过外部 url 的方式引入 svg (#2052 )
• 登录时支持携带 query (#2013 )

🐛 修复

• 修复了 Dashboard 图表在移动端展示问题(#2060)
• 修复重定向页面会在vue-devtool中出现 bug(#2066 )
• 修复切换用户权限时的 bug (#2072 )

✨ 优化

• Tinymce 富文本优化为按需加载的形式 (#2102 )
• Error Log 组件新增 清除 log 按钮(#2065 by@toruksmakto )
• 优化 Right Panel 组件样式 (#2101 by@Liugq5713 )
• 个人详情页 移动端适配(#2020)
• 默认情况在生产环境中使用MockJS模拟数据。若有需求请自己移除。(4ef0782)
• 当页面跳转至redirect的时候，面包屑不在变化(#2086 )。

⚠️ Breaking Changes

• generatepostcss.config.js instead of.postcssrc.js，与vue-cli保持一致

🎉 Features

• Add Spanish (#2070 by@yamelsenih )
• Vuex store import supports (#2047 by@yamelsenih )
• Svg component support import svg from url (#2052 )
• Support to carry the query when logging in(#2013 )

🐛 Bugs

• Fixed Dashboard chart showing issues on mobile#2060)
• Fixed the redirect page will cause a bug invue-devtool(#2066 )
• Fixed bug when switching user permissions (#2072 )

✨ Optimization

• Dynamic import Tinymce(#2102 )
• Error Log component added Clear log button(#2065 by@toruksmakto )
• Optimize the right panel component style (#2101 by@Liugq5713 )
• Profile page mobile adapter(#2020)
• By default,MockJS is used to simulate data in a production environment. Please remove it if you need it.(4ef0782)
• When the page jumps toredirect, the breadcrumbs are not changing (#2086).

⚠️ Breaking Changes

• generatepostcss.config.js instead of.postcssrc.js, consistent withvue-cli

🎉 新功能

• 页面title修改为动态的，会随着页面的变化而变化，不再是写死的 (#1910 by@ren8179 )
• 新增 profile 个人详情页 (#1953 by@tuandm )
• 国际化新增了日语 (#1999 by@linzhengen )

🐛 修复

• 修复了 permission 页面的重定向错误 (#1908 by@linfeimy )
• 修复了v-el-height-adaptive-table指令的 bug (#1924 by@yuntao1997 )
• 修复了在 windows 下 mock-server 的 bug (#1939 by@dingangang )
• 修复了综合实例页面display_time 一直是NaN 的 bug (#2001 by@dolonfly )

✨ 优化

• 全面优化了代码注释
• 优化了部分全局 css
• 为公用函数增加了JSDoc注释 (#1883 by@tuandm )
• Tinymce 增加了 width 参数 (#1952 by@ansonhorse )
• login 页面的 input 增加tabindex 使其支持 tab 切换 (#1933 by@toruksmakto )
• 优化了设置了fixedHeader 情况下滚动效果 (e8e6c7e)

⚠️ Breaking Changes

• master 分支将默认不在支持国际化，所有国际化内容移至i18n 分支 (#1828)
• 修改Breadcrumb的参数名noredirect =>noRedirect(4ee334a)
• 全局优化了文件名 (#1884) 详情命名规则见文档
• Tinymce 改用 cdn 引入的方式 (#1996 )

🎉 Features

• Thetitle of the page is now dynamic and will change as the page changes. It is no longer written dead. (#1910 by@ren8179 )
• Add profile profile page (#1953 by@tuandm )
• i18n addedJapanese lang (#1999 by@linzhengen )

🐛 Bugs

• Fixed redirect error for permission page (#1908 by@linfeimy )
• Fixed bug withv-el-height-adaptive-table directive (#1924 by@yuntao1997 )
• Fixed a bug with mock-server under windows (#1939 by@dingangang )
• Fixed example pagedisplay_time which has been a bug forNaN (#2001 by@dolonfly )

✨ Optimization

• Optimized code comments
• Optimized some global css
• AddedJSDoc comment to global function (#1883 by@tuandm )
• Tinymce added the width prop (#1952 by@ansonhorse )
• The input of the login page addstabindex to support tab switching. (#1933 by@toruksmakto )
• Optimized the scrolling effect whenfixedHeader is set (e8e6c7e)

⚠️ Breaking Changes

• The master branch will not support i18n by default, and i18n will be moved toi18n branch (#1828)
• Modify the parameter name ofBreadcrumbnoredirect =>noRedirect(4ee334a)
• Globally optimized file name (#1884) For details of naming rules, seeDocumentation
• Import Tinymce from cdn (#1996 )

🎉 新功能

• 修改vuex 模块为自动导入(#1815 by@Estelle00 )
• 新增mock-server 支持热更新 (#1850 )
• 侧边栏新增 高亮选项activeMenu，可手动配置路由需要高亮的侧边栏(#1833 )

🐛 修复

• 修复了侧边栏scrollbar 滚动慢和定位问题(#1853 )
• 修复了Guide demo 页面的 bug (184125b ,25414f1)
• 修复了 在设置了FixedHeader 情况下，页面布局的 bug(a8c6e11)
• 修复tags-view 关闭最后一个页面是首页的时候出现的 bug(#1866 by@de1ck )
• 修复了tags-view 的层级问题(c923726)
• 修复了error-log 的层级问题(#1844 by@ansonhorse )
• 修复了drag-list demo 在 Firefox 下的 bug (#1841)
• 修复了在使用cnpm安装模块后，optimization.splitChunks 失效的问题(c833cb6)
• 修复了侧边栏Sidebar 在设置了alwaysShow: true外链跳转失效问题 (#1870)

✨ 优化

• 登录页，输密码时增加大小写提示 (#1845 by@mayunhai )

🎉 Features

• Modify thevuex module to auto import(#1815 by@Estelle00 )
• Addedmock-server support for hot reload (#1850 )
• Sidebar adds a highlight optionactiveMenu to manually configure the route to highlight in the sidebar (#1833)

🐛 Bugs

• Fixed sidebarscrollbar scrolling slow and positioning problem(#1853 )
• Fixed bug onGuide demo page(184125b ,25414f1)
• Fixed style bugs withFixedHeader set(a8c6e11)
• Fixedtags-view the bug that occurred when closing the last page was the home page (#1866 by@de1ck )
• Fixed a problem with thetags-view z-index(c923726)
• Fixed a problem with theerror-log z-index(#1844 by@ansonhorse )
• Fixed bug withdrag-list demo in Firefox (#1841)
• Fixed optimization.splitChunks failed after installing modules withcnpm(c833cb6)
• FixedSidebar settingalwaysShow: true external link bug(#1870)

✨ Optimization

• Login page, add capitalization prompt when write password (#1845 by@mayunhai )

v4.0版本正式发布。

重大改变

• 基于vue-cli@3进行构建

• 调整了项目的目录结构

  • mock 文件移至根目录下
  • layout 从 views 文件夹下移至 src 下

• 使用了最新的eslint-plugin-vue@5，重新格式化了代码

• 现在可以在不刷新页面的情况下 remove routes

• 更新了husky@1.3.1

• 增加了 jest 单元测试

• 新增了npm run preview、npm run test:uni、npm run new指令

• 使用了新的 mock 方式，解决了之前 mock 若干问题

• vuex 启用了 模块化namespaced

• 新增了settings.js，让 sidebarLogo、fixedHeader、TagsViews 等都可配置

• 新增了 sidebar logo

• 重构了侧边栏 sidebar 代码逻辑，并且优化了样式和展开收起动画，同时让二级菜单内容过多时支持滚动

• 使用了 async/await 替代了部分 promise 代码

• 增加了 header-search 组件#1591

• 增加了 fearure[TagsView]: add affix porperty#1577

• 移除了 tree-table 组件。element-ui v2.7.0 开始支持tree-table，所以不再独立维护。

• 增加了权限配置 demo

• 增加了导出多级表头 excel 的 demo

• feature[Directive]: add auto-height table directive

RoadMap

• 更好的多级页面的缓存：目前页面的缓存基于keep-alive，但当三级路由嵌套的情况下，支持的并不好。之后探索一个更好的解决方案。
• 单元测试：当项目大了之后，没有单元测试维护起来还是有些吃力的。
  之后会慢慢补上 unit-test 的测试用例。 酌情加上一些e2e-test的例子。
• 去国际化：其实大部分人是不需要国际化的，默认情况下移除国际化。单独开一个国际化分支。
• 适配 webpack5：webpack5 还是解决了不少之前的痛点的，正式版发布之后会进行升级
• vue 3.0： 等官方发布之后会基于新版本进行重构

The v4.0 version was officially released.

Breaking Changes

• Build based onvue-cli@3

• Adjusted the directory structure

  • Mock file move to root directory
  • Layout from the views folder to src

• Reformatted the code with the latesteslint-plugin-vue@5

• You can now remove routes without refreshing the page.

• Updatedhusky@1.3.1

• Added jest unit test

• Addednpm run preview,npm run test:uni,npm run new directive

• Using the new mock method, solved some problems with the previous mock

• vuex usenamespaced

• Addedsettings.js to make sidebarLogo, fixedHeader, TagsViews, etc. configurable

• Add sidebar logo

• Refactored the sidebar code logic and optimized the style and unfolding the animation

• Use Async/await

• Add header-search#1591

• Add fearure[TagsView]: add affix porperty#1577

• Remove tree-table.element-ui v2.7.0 started to supporttree-table, so it is no longer maintained independently.

• Added permission configuration demohttps://github.com/PanJiaChen/vue-element-admin/commit/c963f56686b9731a517a17c4d562bc3da0fa3771

• Added demo to export multi-level header excel

• feature[Directive]: add auto-height table directive#1702 (by@yuntao1997 )

RoadMap

• Better multi-level page caching: The current page cache is based onkeep-alive, but when the three-level routing is nested, the support is not good. Then explore a better solution.
• Unit testing: When the project is big, it is still a little difficult to maintain without unit testing.
  The unit-test test case will be added slowly. Add some examples ofe2e-test as appropriate.
• Remove i18n: In fact, most people do not need to be i18n. Open a i18n branch separately.
• Adapting webpack5:webpack5 still solves a lot of pain points before, the upgrade will be upgraded after the official version is released.
• vue 3.0： vue 3.0: Refactoring based on the new version after official release

注意：这是v4.0 版本之前最后的一个版本更新了。之后除非有重大bug，不然v3.x.x版本将不再继续迭代。

Note: This is the last version update before thev4.0 version. After that, unless there is a major bug, thev3.x.x version will not continue to iterate.