前言

公司的项目是用vue-cli4构建的，最近要安装一个依赖，然后这个依赖在run serve是正常的，打包之后点击一次正常，再点击就报错。后面经过仔细排查，才发现是webpack的版本问题。

vue-cli4安装的webpack4的，vue-cli5安装的是webpack5的。在vue-cli5安装这个依赖打包就没有这个问题。

所以接下来就要把vue-cli4升级到vue-cli5，因为是跨版本升级，很多写法，用法都不一样，太酸爽了，所以总结下这个过程，也算是温故知新。

正文

我们首先升级vue-cli的全局依赖。

我用的是yarn，如下

js复制代码// npm
npm update -g @vue/cli 
// yarn
yarn global upgrade --latest @vue/cli

升级成功，打印vue -V可以查看最新的版本。

然后可以使用vue upgrade升级项目的cli依赖（@vue/cli-plugin-开头或者vue-cli-plugin- 开头）。

然后安装对应的依赖，就算升级成功了。

但是你以为就好了吗？