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

目录

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

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

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 *;'
    }
  }
}

  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
  })
]

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

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

PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦

面向百度编程

公众号

weixinQRcode.png

往期文章

个人主页

posted @ 2022-08-25 14:11  鹏多多  阅读(3309)  评论(0)    收藏  举报