1，前言

本文主要分享vue-cli从4.x升级到5.x的过程，以及更新后vue.config.js的变化，因为vue-cli 5已经使用上webpack5。

2，升级vue-cli

1. 首先打开命令提示符终端，输入npm uninstall @vue/cli -g，卸载掉4.x的版本，如果是Mac系统，则是sudo npm uninstall @vue/cli -g

2. 然后输入npm install -g @vue/cli@latest，安装最新版本的vue-cli，Mac是sudo npm install -g @vue/cli@latest

3. 这时候，输入vue -V，可以看到终端提示的vue-cli版本号：

   L:\github>vue -V
   @vue/cli 5.0.4
   1
   2

4. 这时候，使用vue create xxx，就可以创建一个项目了，过程如下图所示：
   

3，升级的部分变化

因为vue-cli 5已经使用上webpack5，之前vue.config.js文件的一些webpack的配置是有一些调整的。

1. css选项下的loaderOptions选项，由之前的pretendData变为了additionalData

   css: {
     loaderOptions: {
       sass: {
         // pretendData: '@use "@/themes/element-variables.scss" as *;'
         additionalData: '@use "@/themes/element-variables.scss" as *;'
       }
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8

2. devServer配置中的hotOnly改为hot，默认false，不开启可以不写。

3. devtool更加严格，可填写的值：传送门

4. optimize插件变化

   plugins: [
     // new webpack.optimize.LimitChunkCountPlugin({
     //  maxChunks: 5, // 重复模块进行合并的最大数量
     //  minChunkSize: 100 // 最小大小
     // })
     // 变成这样
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 5
     }),
     new webpack.optimize.MinChunkSizePlugin({
       minChunkSize: 10000
     })
   ]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

5. 可以通过cache选项开启缓存，第一次编译之后，第二次启动和vite一样快

---

如果看了觉得有帮助的，我是@上进的鹏多多，欢迎 点赞 关注 评论；

往期文章

• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金