【实战】1377- 如何从 Vue CLI 迁移到 Vite

‍译自：https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

如果你在 2021 年之前使用 Vue 进行开发，那么你选择的构建工具很有可能是Vue CLI。很长时间以来，它一直是 Vue.js 项目脚手架的标准实践。不过现在，尤大的下一代构建工具 Vite 已经吸引了很多关注，它是Vue CLI 的一个很好的替代品。

为什么要从 Vue CLI 迁移到 Vite？

主要原因是速度。Vite的开发服务器速度很快。因为它对JavaScript模块使用原生浏览器支持，所以服务器的启动时间是即时的。同时这还意味着，无论程序大小如何，热模块更新都会很快，因为不必重建整个bundle。为了演示，下面一个使用Vue Cli和Vite创建完全相同的项目进行比较：

1. 启动时间：

• Vue CLI-2591毫秒（超过2秒）
• Vite-259ms（远低于半秒-快10倍）⚡️

2 . 热更新（HMR）：

• Vue CLI-171ms
• Vite-基本上是即时的 记住，这只是一个搭建的简单示例。随着项目的增长，Vue CLI版本的速度会逐渐变慢，而Vite却承诺无论项目大小，都能在相同的级别速度上运行。

如何从Vue CLI迁移到Vite

为了解决这个问题，本文使用Vue CLI构建了一个全新的项目，将与您一起完成将其转换为Vite的步骤。当然，实际工作中通常不会从一个全新的Vue CLI项目开始，但很多步骤是通用的。此外，本文选择Vue2作为演示，因为大多数人可能仍然在使用Vue 2。同时，本文也指出了Vue 3的不同之处（它比vue2迁移更简单）。

第1步：更新依赖项

迁移到Vite的第一步是更新package.json中的依赖项。我们需要删除与Vue CLI相关的依赖项。

// package.json
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove

我们还可以删除sass-loader，因为Vite内置支持常见的预处理器。我们也可以继续使用自己选择的CSS预处理器。但请注意，Vite建议将原生CSS变量与PostCSS插件一起使用，编写简单、符合未来标准的CSS。

// package.json
"sass-loader": "^8.0.2" // remove

最后，添加Vite作为依赖项，以及Vite的Vue插件组件，以支持单文件组件。

// package.json
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",

此外，因为我们正在迁移Vue 2项目，我们还需要添加社区为Vue 2开发的Vite插件。如果我们使用Vue 3，就没有必要这样做。

// package.json
"vite-plugin-vue2" : "1.9.0" // add for Vue 2

安装了Vite插件后，我们现在还可以删除vue模板编译器，因为Vite vue插件有这个功能。

// package.json
"vue-template-compiler": "^2.6.11" //remove (SFC support provided by vite vue plugin)

第2步：仅支持现代浏览器

既然Vite是下一代的构建工具，所以我们可以只支持现代的浏览器。这将使我们的构建尽可能精简和快速。实际上，这意味着我们可以将Babel完全从依赖关系中移除，因为大多数移动和pc浏览器几乎完全支持所有ES6功能。如果您仍然需要支持Internet Explorer 11等较旧的浏览器，Vite会为此提供一个官方插件。所以，要删除Babel，首先我们要删除 babel.config.js文件。接下来，前面我们已经删除了@vue/cli babel插件依赖项，我们还需要从package.json文件中删除几个其他与babel相关的依赖项。

// package.json
"babel-eslint": "^10.1.0", // remove
"core-js": "^3.6.5", // remove

因为已经删除了'babel eslint'，我们还需要在.eslintrc文件中删除的将其作为解析器的配置 。

// .eslintrc
// remove
parserOptions: {
    parser: "babel-eslint",
},

最后，当我们在.eslintrc我们需要将env从node更新为'es2021'，因为我们只支持那些现代浏览器。

// .eslintrc
env: {
    node: true, // remove
    es2021: true,
}

这一操作还将更新eslint本身，以及eslint-plugin-vue插件，以支持es2021环境。

$ npm install eslint@8 eslint-plugin-vue@8

第3步：添加Vite配置

在这一步中，让我们为Vue项目配置Vite。Vite通过项目根目录中的vite.config.js文件进行配置。以下是使用npm init vite@latest命令创建的Vite项目默认配置文件。

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

让我们再增加2个配置项。首先，我们将从 vite-plugin-vue2 导入Vue插件，而不是官方的vite-Vue插件。

// vite.config.js
import vue from '@vitejs/plugin-vue' // remove
import { createVuePlugin as vue } from "vite-plugin-vue2";

//...

如果您使用的是Vue 3，当然不必这样做。 其次，为了让@别名像在Vue CLI中一样工作，我们需要添加下面这个配置项。

// vite.config.js
//...
const path = require("path");
export default defineConfig({
  //...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

第4步：移动index.html文件

与Vue CLI不同，Vite会将index.html文件放置在项目的根目录中，而不是public目录中，因此需要移动它。在index.html我们需要做一些改变。 首先，我们需要将<%= htmlWebpackPlugin.options.title %>占位符改为硬编码值。

// index.html

<!--remove-->
<title><%= htmlWebpackPlugin.options.title %></title> 
<!--add-->
<title>Hard Coded Title</title>

//...
<!--remove-->
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<!--add-->
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

我们还需要把“<%=BASE_URL%>”占位符改为绝对路径。

// index.html

<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">

最后也是最重要的一点，应用程序不再是自动注入的，所以我们需要像这样引入它：

<script type="module" src="/src/main.js"></script>

第5步：更新脚本命令

回到package.json文件，我们需要将旧的vue-cli-service命令更改为特定于Vite的命令。

// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview",

请注意，启动开发服务器的命令不再是serve。Vite使用dev代替，serve命令用于在本地预览应用。此外，如果启用了linting，则应更新lint脚本以直接运行eslint。

"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"

第6步：更新环境变量

环境变量在Vite中的工作方式与在Vue CLI中的工作方式之间存在很多相同的地方。例如，你的.env命名约定可以保持不变。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

但是，我们不能现在在process变量上的访问环境变量。取而代之的是 import.meta.env中找。

// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,

第7步：添加.vue扩展到SFC

虽然我们新创建的Vue CLI项目已经做到了这一点，但我敢打赌，您现有的应用程序可能没有做到这一点。因此，必须确保所有单文件组件的导入都以.vue结束。

// Home.vue
import HelloWorld from "@/components/HelloWorld.vue"; // .vue is required

可以通过在vite.config.js文件中的resolve.extensions配置项添加.vue完成这项配置。

// vite.config.js
//...
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    //...
  },
});

第8步：清理魔术注释

最后，我们可以删除所有用于命名动态导入的魔术注释，因为这些是webpack的专属注释，对vite而言没有意义。

// router/index.js
import(
    /* webpackChunkName: "about" */  // remove
    "../views/About.vue"
),

取而代之的是，Vite会根据原始的.vue文件自动命名。如：About.37a9fa9f.js。

第9步：享受更快、更无缝的开发体验

完成上述步骤1-8后，应用程序就可以使用Vite运行了！用npm run dev启动开发服务器，看看Vite有多快。