vue-cli V4 升级到 V5

170

Migrate from v4

一、准备工作

  • 备份代码
  • 或者提交所有代码到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
  • 其他相关文件(根据项目配置的不同)