将旧项目从 Vue CLI 迁移到 Vite

最近，我们冲刺中增加了一张工单，目标是减少一个遗留项目中具有严重和高危漏洞的软件包。这项任务涉及将使用 Vue CLI 作为构建工具的 Vue 2 项目迁移到 Vite。

这是一个很好的机会，可以使技术栈现代化，并利用 Vite 提供的性能优势。在本文中，我将分享我完成迁移所遵循的主要步骤。

---

什么是 Vite？

Vite（发音为“veet”）是一个构建工具，旨在为现代 Web 项目提供更快（而且速度确实很快）和更精简的开发体验。

使用 Vite，您可以获得显着缩短的构建时间、极快的开发服务器和简化的配置过程。

---

迁移步骤

1. 更新 package.json

第一步是从项目中删除所有 Vue CLI 依赖项。这包括 Babel 相关的包、babel.config.js 配置文件和 core-js 依赖项。

<code>//package.json
"@vue/cli-plugin-babel": "~5.0.8", //remove
"@vue/cli-plugin-e2e-nightwatch": "~5.0.8", //remove
"@vue/cli-plugin-eslint": "~5.0.8", //remove
"@vue/cli-plugin-unit-jest": "~5.0.8", //remove
"@vue/cli-service": "~5.0.8", //remove

"core-js": "^3.6.4", //remove
"@babel/core": "^7.8.4", //remove
"babel-core": "^7.0.0-bridge.0", //remove
"babel-jest": "^25.1.0", //remove
</code>

如果您的 ESLint 配置使用 "babel-eslint" 作为解析器，则需要替换它。

<code>//package.json
"babel-eslint": "^10.0.3", //remove</code>

我将我的 ESLint 配置从 .eslintrc 迁移到现代的 eslint.config.mjs 格式，并将 ESLint 更新到版本 8，我强烈推荐这样做。

<code>npm install eslint@8 eslint-plugin-vue@8 --save-dev

npx @eslint/migrate-config .eslintrc.js</code>

清理这些依赖项后，我添加了 Vite 和一个用于 Vue 集成的插件：

<code>npm install vite @vitejs/plugin-vue2 --save-dev</code>

---

2. 设置 Vite

与许多其他库一样，Vite 使用项目根目录中的配置文件 (vite.config.js) 来定义构建和开发选项。这是一个简单的起点：

<code>import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue2()],
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});</code>

---

3. 移动和更新 index.html

在 Vue CLI 中，index.html 文件通常位于 public 文件夹中。但是，Vite 期望它位于项目的根目录。将文件移动到根目录并根据需要更新任何路径引用。

<code>mv public/index.html index.html</code>

<code><link href="<%=%20BASE_URL%20%>favicon.ico" rel="icon">  <link href="/favicon.ico" rel="icon"></code>

包含 main.js 是因为我们不再自动注入。

---

4. 更新环境变量

Vite 以不同的方式处理环境变量。确保更新或创建 .env 文件，并为要公开的所有变量添加 VITE_ 前缀。例如：

<code>VITE_API_URL=https://api.example.com</code>

<code>// router/index.js
//remove
base: process.env.BASE_URL, 
//add
base: import.meta.env.BASE_URL,</code>

---

5. 更新脚本

最后，我更新了 package.json 中的脚本，以便使用 Vite 二进制文件而不是 Vue CLI。它们现在看起来是这样的：

<code>//from
"scripts": {
  "serve": "vue-cli-service serve --port 8084",
  "dev": "npm run serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit",
  "test:e2e": "vue-cli-service test:e2e --headless",
  "lint": "vue-cli-service lint",
  "test": "npm run test:unit && npm run test:e2e"
},


//to
"scripts": {
  "serve": "vite --port 8084",
  "dev": "npm run serve",
  "build": "vite build",
  "test:e2e": "nightwatch --headless",
  "test:unit": "vitest --run",
  "test": "npm run test:unit && npm run test:e2e",
  "lint": "eslint ."
},</code>

---

通过这些更改，您现在可以使用 Vite 运行您的 Vue 2 项目，并享受它带来的所有好处，尤其是改进的构建性能。

---

后续步骤

在我的下一篇文章中，我将分享如何在没有 Vue CLI 插件的情况下启用 Nightwatch，并将 Jest 迁移到 Vitest。敬请关注！

---

如果您有任何疑问或想分享您自己使用 Vite 的经验，请随时发表评论！ ?

以上是将旧项目从 Vue CLI 迁移到 Vite的详细内容。更多信息请关注PHP中文网其他相关文章！