一、准备工作
- 备份代码
- 或者提交所有代码到Git 或其他版本控制系统
二、全局安装 vue-cli V5 版本
首先,全局安装 Vue CLI V5 版本。打开终端并运行以下命令:
npm install -g @vue/cli
安装完成后,可以通过以下命令验证安装的版本:
vue --version
看到类似下面的输出,确认已成功安装 Vue CLI 5.0.8 版本:
@vue/cli 5.0.8
三、执行全部升级
现在,可以执行整体升级过程。在项目的根目录下,打开终端并运行以下命令:
vue upgrade
然后,将在控制台看到类似以下输出:
✔ Gathering package information...
Name Installed Wanted Latest Command to upgrade
@vue/cli-service 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-service
@vue/cli-plugin-babel 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-plugin-babel
@vue/cli-plugin-eslint 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-plugin-eslint
@vue/cli-plugin-router 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-plugin-router
@vue/cli-plugin-typescript 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-plugin-typescript
@vue/cli-plugin-unit-jest 4.5.13 4.5.19 5.0.8 vue upgrade @vue/cli-plugin-unit-jest
<!--输入yes/y-->
? Continue to upgrade these plugins? Yes
接下来,输入 "yes" 或 "y" 确认升级。
然后,Vue CLI 将开始升级相关插件,例如 @vue/cli-service、@vue/cli-plugin-babel、@vue/cli-plugin-eslint 等等。将看到类似以下输出:
Upgrading @vue/cli-service from 4.5.13 to 5.0.8
...其他依赖安装日志
四、相关文件变更
升级成功后,可以注意到一些相关文件的变更。根项目配置,以下文件可能会受到影响:
- package.json
- package-lock.json
- babel.config.js
- .eslintrc.js
- 其他相关文件(根据项目配置的不同)