如何从 Vue CLI 迁移到 Vite【待编辑】

快跑蜗牛2023-04-09

如果您在 2021 年之前一直在使用 Vue 进行开发，那么您选择的构建工具很有可能是 Vue CLI。一段时间以来，它一直是搭建 Vue.js 项目的事实标准。不过现在，Evan You 的下一代构建工具 Vite 已经获得了很多关注，并且是 Vue CLI 的一个很好的替代品。

为什么从 Vue CLI 迁移到 Vite？

采取这一举措的主要原因是速度。Vite 的开发服务器速度很快。因为它使用对 JavaScript 模块的本机浏览器支持，所以服务器启动时间是即时的。该方法还意味着无论应用程序的大小如何，热模块替换都保持快速，因为不必重建整个包。

为了演示，这里是一个全新的 Vue CLI 项目与使用 Vite 的完全相同项目的基准测试。

• 开始时间：

  • Vue CLI - 2591 毫秒（超过 2 秒）
  • Vite - 259 毫秒（不到半秒 - 快 10 倍）⚡️

• 模块热更换 (HMR)：

  • Vue CLI - 171 毫秒
  • Vite - 不是通过 Vite 打印到控制台，而是通过观察...基本上是即时的

请记住，这只是脚手架样板。随着项目的增长，Vue CLI 版本只会越来越慢，而 Vite 承诺无论项目大小如何，都能以相同的水平执行。

如何从 Vue CLI 迁移到 Vite

所以你确信 Vite 适合你，你如何将你的项目从使用 Vue CLI 迁移到 Vite？

为了回答这个问题，我使用 Vue CLI 构建了一个全新的项目，我将与您一起完成将其转换为 Vite 的步骤。当然，您通常不会从一个全新的 Vue CLI 项目开始，但其中的许多步骤对于您已建立的项目都是相同的。

此外，我选择从 Vue 2 代码库开始工作，因为你们中的大多数人可能仍然在 Vue 2 上运行完善的代码库。但是，我还在下面的过程中做了注释，其中 Vue 3 会有所不同。

最后，如果你不想和我一起完成整个过程，你可以在这个示例 repo 中看到变化的差异。

步骤 #1：更新依赖项

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

perl
 代码解读
复制代码
// 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 变量与实现 CSSWG 草案的PostCSS插件一起使用，并编写普通的、符合未来标准的 CSS。

json
 代码解读
复制代码
// package.json
"sass-loader": "^8.0.2" // remove

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

json
 代码解读
复制代码
// package.json
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",

此外，由于我们正在迁移 Vue 2 项目，因此除了官方 Vue 插件外，我们还需要包括社区维护的 Vue 2 Vite 插件。如果我们使用 Vue 3，就没有必要这样做了。

json
 代码解读
复制代码
// package.json
"vite-plugin-vue2" : "1.9.0" // add for Vue 2

安装 Vite 插件后，我们现在还可以删除由 Vite Vue 插件处理的 vue 模板编译器。

json
 代码解读
复制代码
// package.json
"vue-template-compiler": "^2.6.11" //remove (SFC support provided by vite vue plugin)

步骤#2：只为现代浏览器提供支持

由于 Vite 是下一代构建工具，让我们乐观地继续，只支持最现代的浏览器。这将使我们的构建尽可能精简和快速。

实际上，这意味着我们可以从我们的依赖项中完全删除 Babel，因为大多数移动和桌面常绿浏览器几乎完全支持所有 ES6 功能。如果你仍然需要支持旧版浏览器，比如 Internet Explorer 11，Vite 确实为此提供了一个官方插件。

因此，要删除 Babel，首先我们将删除该babel.config.js文件。

接下来，由于我们已经删除了@vue/cli-plugin-babel需要 babel 本身的依赖项，我们只需要从 package.json 中删除其他几个与 babel 相关的依赖项。

json
 代码解读
复制代码
// package.json
"babel-eslint": "^10.1.0", // remove
"core-js": "^3.6.5", // remove

现在已babel-eslint删除，我们需要将其作为解析器从我们的.eslintrc文件中删除。

arduino
 代码解读
复制代码
// .eslintrc
// remove
parserOptions: {
    parser: "babel-eslint",
},

注意：如果您的项目中没有 linting/formatting 设置，您可以跳到下一步，但如果您还没有，我强烈建议您添加它。这是一个很棒的教程，可以帮助您在 Vite 支持的 Vue 项目上进行设置。

最后，当我们进入时，.eslintrc我们需要添加环境 es2022，因为项目的 src 现在完全位于 ES 模块领域。您也可以保留节点环境，因为一些配置文件仍在节点环境中运行。

yaml
 代码解读
复制代码
// .eslintrc
env: {
    node: true,
    es2022: true, // 👈 add this
}

这一变化也将迫使我们更新eslint自身，以及eslint-plugin-vue支持 es2021 环境。

ruby
 代码解读
复制代码
$ npm install eslint@8 eslint-plugin-vue@8

第三步：添加 Vite 配置

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

javascript
 代码解读
复制代码
// vite.config.js

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

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

我们想再添加 2 个东西。

首先，我们将导入 Vue 插件而vite-plugin-vue2不是官方 Vite Vue 插件。

javascript
 代码解读
复制代码
// vite.config.js
import vue from '@vitejs/plugin-vue' // remove
import { createVuePlugin as vue } from "vite-plugin-vue2";

//...

如果你使用的是 Vue 3，当然，你不必这样做。

其次，为了使@导入别名像在 Vue CLI 中那样工作，我们需要添加这一点。

arduino
 代码解读
复制代码
// vite.config.js
//...
const path = require("path");
export default defineConfig({
  //...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

第 4 步：移动 index.html

与 Vue CLI 相反，Vite 实际上将保存 Vue.js 应用程序的 index.html 文件放在项目的根目录而不是公共目录中，因此您需要移动它。

同样在 index.html 中，您需要进行一些更改。

首先，我们将<%= htmlWebpackPlugin.options.title %>占位符的实例更改为硬编码值。

xml
 代码解读
复制代码
// 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 %>绝对路径替换占位符。

xml
 代码解读
复制代码
// index.html

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

最后也是最重要的是，JavaScript 应用程序不再自动注入，因此我们需要像这样包含它：

xml
 代码解读
复制代码
<script type="module" src="/src/main.js"></script>

第5步：更新脚本

回到 package.json，我们还需要更新脚本。我们会将旧vue-cli-service命令更改为 Vite 特定命令。

json
 代码解读
复制代码
// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview",

请注意，启动开发服务器的命令不再是serve. Vitedev改为使用并serve用于在本地预览生产构建。

此外，如果启用了 linting，则应更新 lint 脚本以直接运行 eslint。

json
 代码解读
复制代码
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"

第6步：更新环境变量

环境变量在 Vite 中的工作方式与它们在 Vue CLI 中的工作方式有很多交叉。例如，您的 .env 命名约定可以保持不变。

bash
 代码解读
复制代码
.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。

arduino
 代码解读
复制代码
// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,

此外，VUE_APP_用于使声明客户端暴露的环境变量更明显的前缀更改为VITE_，因此如果您有任何此类环境变量，则必须相应地更新它们。

第 7 步：向 SFC 导入添加 .vue 扩展名

虽然我们新创建的 Vue CLI 项目已经这样做了，但我敢打赌您现有的应用程序可能不会这样做。因此，您必须确保所有导入的单个文件组件都以.vue扩展名结尾。

javascript
 代码解读
复制代码
// Home.vue
import HelloWorld from "@/components/HelloWorld.vue"; // .vue is required

如果由于你的代码库的大小，这个过程过于繁重，你可以配置 vite，这样就不需要了。这是通过添加到 中的配置选项.vue来实现的。请确保您还手动包含所有默认扩展名，尽管此选项会覆盖默认值。resolve.extensions``vite.config.js

arduino
 代码解读
复制代码
// vite.config.js
//...
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    //...
  },
});

虽然这有效，但应尽可能避免。为什么？因为根据 Vite 文档：“请注意，不建议省略自定义导入类型（例如.vue）的扩展，因为它会干扰 IDE 和类型支持。”

第 8 步：清理魔术评论

最后，您可以删除所有用于命名动态导入的神奇注释，因为这些是 webpack 特定的注释，对 Vite 没有任何意义。

go
 代码解读
复制代码
// router/index.js
import(
    /* webpackChunkName: "about" */  // remove
    "../views/About.vue"
),

相反，Vite 会根据原始 .vue 文件名结合缓存破坏哈希自动命名你的块，如下所示：About.37a9fa9f.js

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

完成上面的步骤 1-8 后，您的应用程序应该可以开始使用 Vite 运行了！继续并启动你的开发服务器npm run dev，看看 Vite 对你自己有多快。

如果此时弹出任何其他错误，请在下方评论并与社区分享，以及您可能有的任何解决方案！

最后，请记住，您可以将所有这些更改视为此示例存储库中的差异，以帮助您进行迁移。