最近,我們衝刺增加了一張工單,目標是減少一個遺留項目中具有嚴重和高危險漏洞的軟體包。這項任務涉及將使用 Vue CLI 作為建置工具的 Vue 2 專案遷移到 Vite。
這是一個很好的機會,可以使技術堆疊現代化,並利用 Vite 提供的效能優勢。在本文中,我將分享我完成遷移所遵循的主要步驟。
Vite(發音為「veet」)是一個建置工具,旨在為現代 Web 專案提供更快(而且速度確實很快)和更精簡的開發體驗。
使用 Vite,您可以獲得顯著縮短的建置時間、極快的開發伺服器和簡化的設定流程。
第一步是從專案中刪除所有 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>
與許多其他程式庫一樣,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>
在 Vue CLI 中,index.html 檔案通常位於 public 資料夾中。但是,Vite 期望它位於專案的根目錄。將檔案移至根目錄並根據需要更新任何路徑引用。
<code>mv public/index.html index.html</code>
<code><link href="<%= BASE_URL %>favicon.ico" rel="icon"></link> <link href="/favicon.ico" rel="icon"></link></code>
包含 main.js 是因為我們不再自動注入。
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>
最後,我更新了 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中文網其他相關文章!