將舊項目從 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中文網其他相關文章！