如何从 Vue CLI 迁移到 Vite

如何从 Vue CLI 迁移到 Vite

十一月11 2021

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

• 首先说一个插件添加链接描述，可以在webpack项目外层套一个vite从而实现转移。

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

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

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

• 开始时间：

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

• 热模块更换 （HMR）：

• Vue CLI - 171ms
• 维特 - 不是由维特打印到控制台，而是从观察中打印出来...基本上是即时的

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

如何从 Vue CLI 迁移到 Vite

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

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

另外，我选择从 Vue 2 代码库工作，因为你们中的大多数人可能已经建立了完善的代码库仍在 Vue 2 上运行。但是，我也在下面的过程中做了笔记，Vue 3 的情况会有所不同。

最后，如果您不想和我一起完成整个过程，您可以在此示例存储库中看到更改的差异。

步骤#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 插件一起使用，这些插件可以实现 CSSWG 草稿并编写简单的、符合未来标准的 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 插件之外，我们还需要包含社区维护的 Vue 2 插件。如果我们使用 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，因为大多数移动和桌面常青浏览器几乎完全支持所有 ES6 功能。如果您仍然需要支持像Internet Explorer 11这样的旧浏览器，Vite确实为此提供了一个官方插件。

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

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

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

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

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

注意：如果您的项目中没有 linting/format 设置，您可以跳到下一步，但我强烈建议您添加它，如果您还没有它。这是一个很好的教程，可以在你的 Vite 驱动的 Vue 项目上设置它。

最后，当我们进入时，我们需要将 env 从节点更新到，因为我们只支持那些常绿浏览器。.eslintrces2021

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

此更改还将迫使我们自行更新，以及支持 es2021 环境。eslinteslint-plugin-vue

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

步骤#3：添加Vite配置

在此步骤中，让我们为 Vue.js 项目配置 Vite。Vite 是通过项目根目录中的文件配置的。这是使用 为 Vue 生成全新 Vite 项目时的默认文件的样子。vite.config.jsvite.config.jsnpm init vite@latest

// 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 Vue 插件。vite-plugin-vue2

// 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：移动索引.html

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

同样在索引中.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”>

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

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

步骤#5：更新脚本

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

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

请注意，启动开发服务器的命令不再是 。Vite 改为使用，用于在本地预览生产版本。servedevserve

此外，如果您启用了 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

但是，您无法再访问变量上的环境变量。相反，可以在 上找到它们。processimport.meta.env

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

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

步骤 #7：将 .vue 扩展名添加到 SFC 导入

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

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

如果此过程由于代码库的大小而过于压倒性，则可以配置 vite，以便不需要这样做。这是通过添加到 中的配置选项来实现的。确保还手动包含所有默认扩展名，因为此选项会覆盖默认值。.vueresolve.extensionsvite.config.js

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

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

步骤#8：清理魔术评论

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

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

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

步骤#9：享受更快，更无缝的开发体验

完成上述步骤 1-8 后，您的应用程序应该已准备好开始使用 Vite 运行！继续启动您的开发服务器，看看 Vite 对自己来说有多快。npm run dev

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

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