【实战】1377- 如何从 Vue CLI 迁移到 Vite
共 7084字，需浏览 15分钟
·
2022-07-13 14:45
译自：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创建完全相同的项目进行比较：
启动时间：
Vue CLI-2591毫秒（超过2秒） Vite-259ms（远低于半秒-快10倍）⚡️
热更新（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有多快。
译自：https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/