从 v4 迁移 #

首先，全局安装最新版本的 Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

一次性升级所有插件 #

在您现有的项目中，运行

vue upgrade

然后按照命令行指示操作。

请注意，迁移器尚未完成，并且不涵盖所有情况。请阅读下一节以了解每个包中引入的详细重大变更。

逐个手动迁移 #

如果您想手动逐步迁移，可以运行 vue upgrade <the-plugin-name> 来升级特定的 Vue CLI 插件。

重大变更 #

所有包 #

• 不再支持 Node.js 8-11 和 13
• 不再支持 NPM 5

vue 命令（全局 @vue/cli 包） #

已删除 即时原型功能。现在 vue serve / vue build 命令是 npm run serve / npm run build 的别名，它们反过来执行项目 package.json 中指定的脚本。

如果您需要用于开发独立 .vue 组件的最小设置，请使用 https://sfc.vuejs.org/ 或 https://vite.new/vue 代替。

@vue/cli-service #

Webpack 5 #

我们已将底层 webpack 版本升级到 5。底层存在大量重大变更，这些变更在发布公告页面 Webpack 5 发布 (2020-10-10) 中列出。

除了仅对自定义配置显而易见的内部变更之外，还有一些对用户代码的显著变更

1. 不再支持来自 JSON 模块的命名导出。不要使用 import { version } from './package.json'; console.log(version);，而应使用 import package from './package.json'; console.log(package.version);
2. Webpack 5 默认情况下不再包含 Node.js 模块的 polyfill。如果您的代码依赖于任何这些模块，您将看到一条信息性错误消息。您还可以查看 此处，了解以前 polyfill 的模块的详细列表。

开发服务器 #

webpack-dev-server 已从 v3 升级到 v4。因此，vue.config.js 中的 devServer 选项存在重大变更。请查看 webpack-dev-server 迁移指南，了解详细信息。

最值得注意的是

• disableHostCheck 选项已删除，取而代之的是 allowedHosts: 'all'；
• public、sockHost、sockPath 和 sockPort 选项已删除，取而代之的是 client.webSocketURL 选项。
• 开发服务器的 IE9 支持默认情况下未启用。如果您需要在 IE9 下开发，请手动将 devServer.webSocketServer 选项设置为 sockjs。

build 命令和现代模式 #

从 v5.0.0-beta.0 开始，运行 vue-cli-service build 将根据您的 browserslist 配置自动生成不同的捆绑包。--modern 标志不再需要，因为它默认情况下已启用。

假设我们正在使用默认设置构建一个简单的单页应用程序，以下是一些可能的场景

• 使用 Vue 2 项目的默认 browserslist 目标 (> 1%, last 2 versions, not dead)，vue-cli-service build 将生成两种类型的捆绑包
  • 一种用于支持 <script type="module"> 的现代目标浏览器 (app.[contenthash].js 和 chunk-vendors.[contenthash].js)。捆绑包大小将大大减小，因为它会删除针对旧版浏览器的 polyfill 和转换。
  • 一种用于不支持 <script type="module"> 的浏览器 (app-legacy.[contenthash].js 和 chunk-vendors-legacy.[contenthash].js)，并将通过 <script nomodule> 加载。
• 您可以通过在构建命令中追加 --no-module 标志来选择退出此行为。vue-cli-service build --no-module 将只输出支持所有目标浏览器的旧版捆绑包（通过普通的 <script> 加载）。
• 使用 Vue 3 项目的默认 browserslist 目标 (> 1%, last 2 versions, not dead, not ie 11)，所有目标浏览器都支持 <script type="module">，因此没有必要（也没有办法）区分它们，因此 vue-cli-service build 将只生成一种类型的捆绑包：app.[contenthash].js 和 chunk-vendors.[contenthash].js（通过普通的 <script> 加载）。

CSS 模块 #

css.requireModuleExtension 选项已删除。如果您确实需要在 CSS 模块文件名中删除 .module 部分，请参阅 使用 CSS > CSS 模块，了解更多指南。

css-loader 已从 v3 升级到 v6，一些与 CSS 模块相关的选项已重命名，并进行了其他变更。请参阅 完整变更日志，了解更多详细信息。

Sass/SCSS #

不再支持使用node-sass生成项目。它已经弃用一段时间了。请改用sass包。

资源模块 #

url-loader和file-loader已被资源模块取代。如果你想调整内联图片资源的大小限制，现在需要设置Rule.parser.dataUrlCondition.maxSize选项。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .set('parser', {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4KiB
          }
        })
  }
}

底层加载器和插件 #

• html-webpack-plugin从v3升级到v5。更多细节可以在html-webpack-plugin v4的发布公告和完整变更日志中找到。
• sass-loader v7支持已移除。请查看其变更日志中的v8重大变更。
• postcss-loader从v3升级到v5。最显著的变化是，PostCSS选项（plugin / syntax / parser / stringifier）已移至postcssOptions字段。更多细节请查看变更日志。
• copy-webpack-plugin从v5升级到v8。如果你从未通过config.plugin('copy')自定义其配置，则应该没有面向用户的重大变更。完整的重大变更列表可以在copy-webpack-plugin v6.0.0变更日志中找到。
• terser-webpack-plugin从v2升级到v5，使用terser 5，并且在选项格式方面有一些变化。请查看其变更日志了解完整细节。
• 在创建新项目时，默认的less-loader已从v5升级到v8；less从v3升级到v4；sass-loader从v8升级到v11；stylus-loader从v3升级到v5。
• mini-css-extract-plugin从v1升级到v2。
• cache-loader已移除。如果你想使用它，请手动安装。

Babel 插件 #

transpileDependencies选项现在接受布尔值。将其设置为true将编译node_modules中的所有依赖项。

ESLint 插件 #

• eslint-loader已被eslint-webpack-plugin取代，不再支持ESLint <= 6。
• 新项目现在使用eslint-plugin-vue v8生成，请查看其发布说明（v7，v8）了解重大变更。
• @vue/eslint-config-prettier已弃用。请查看https://github.com/vuejs/eslint-config-prettier了解迁移指南。

PWA 插件 #

• 底层的workbox-webpack-plugin从v4升级到v6。workbox网站上提供了详细的迁移指南。
  • 从 Workbox v4 到 v5
  • 从 Workbox v5 到 v6

TypeScript 插件 #

• 已移除TSLint支持。由于TSLint已弃用，我们在本版本中移除了所有与TSLint相关的代码。请考虑切换到ESLint。你可以查看tslint-to-eslint-config，它可以实现大部分自动迁移。
• ts-loader从v6升级到v9。它现在只支持TypeScript >= 3.6。
• fork-ts-checker-webpack-plugin从v3.x升级到v6.x，你可以在其发布说明中查看详细的重大变更。
  • v4.0.0
  • v5.0.0
  • v6.0.0

E2E-Cypress 插件 #

• Cypress 作为对等依赖项是必需的。
• Cypress 从v3升级到v8。请查看Cypress 迁移指南了解迁移过程的详细说明。

E2E-WebDriverIO 插件 #

• WebDriverIO 从v6升级到v7。面向用户的重大变更不多。请查看发布博客文章了解更多细节。

E2E-Nightwatch 插件 #

• Nightwatch 从v1升级到v2。请查看博客文章了解更多细节。此外，还有一个迁移指南。

单元测试-Jest 插件 #

• 对于 Vue 2 项目，@vue/vue2-jest 现在作为对等依赖项是必需的，请将 @vue/vue2-jest 作为开发依赖项安装到项目中。
• 对于 TypeScript 项目，ts-jest 现在作为对等依赖项是必需的。用户需要手动将 ts-jest@27 安装到项目根目录。
• 底层的jest相关包已从v24升级到v27。对于大多数用户来说，过渡应该是无缝的。请查看其相应的变更日志了解更多细节。
  • jest, babel-jest
  • ts-jest

单元测试-Mocha 插件 #

• mocha 从v6升级到v8，请参考mocha v7和mocha v8的发布说明，了解完整的重大变更列表。
• jsdom 从v15升级到v18，面向用户的重大变更列在jsdom v16.0.0发布说明和v18.0.0发布说明中。

内部包 #

@vue/cli-shared-utils #

• chalk 从v2升级到v4
• joi 从v15（以前是@hapi/joi）升级到v17