1，前言
本文主要分享vue-cli从4.x升级到5.x的过程，以及更新后vue.config.js的变化，因为vue-cli 5已经使用上webpack5。
2，升级vue-cli
首先打开命令提示符终端，输入
npm uninstall @vue/cli -g，卸载掉4.x的版本，如果是Mac系统，则是sudo npm uninstall @vue/cli -g然后输入
npm install -g @vue/cli@latest，安装最新版本的vue-cli，Mac是sudo npm install -g @vue/cli@latest-
这时候，输入
vue -V，可以看到终端提示的vue-cli版本号：L:\github>vue -V @vue/cli 5.0.4 -
这时候，使用
vue create xxx，就可以创建一个项目了，过程如下图所示：
创建项目
3，升级的部分变化
因为vue-cli 5已经使用上webpack5，之前vue.config.js文件的一些webpack的配置是有一些调整的。
-
css选项下的loaderOptions选项，由之前的pretendData变为了additionalDatacss: { loaderOptions: { sass: { // pretendData: '@use "@/themes/element-variables.scss" as *;' additionalData: '@use "@/themes/element-variables.scss" as *;' } } } devServer配置中的hotOnly改为hot，默认false，不开启可以不写。devtool更加严格，可填写的值：传送门-
optimize插件变化plugins: [ // new webpack.optimize.LimitChunkCountPlugin({ // maxChunks: 5, // 重复模块进行合并的最大数量 // minChunkSize: 100 // 最小大小 // }) // 变成这样 new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5 }), new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 }) ] 可以通过
cache选项开启缓存，第一次编译之后，第二次启动和vite一样快
如果看了觉得有帮助的，我是@上进的鹏多多，欢迎 点赞 关注 评论；
END
PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦
往期文章
- 超详细的Cookie增删改查
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超详细！Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细！Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
个人主页
