vue-cli4升级到vue-cli5过程记录

2022-08-24 本文已影响0人鹏多多

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变为了additionalData

css: {
  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()，有惊喜哦

往期文章

个人主页

vue-cli4升级到vue-cli5过程记录

1，前言

2，升级vue-cli

3，升级的部分变化

猜你喜欢

热点阅读