Migration eines Legacy-Projekts von Vue CLI zu Vite

Kürzlich wurde unserem Sprint ein Ticket mit dem Ziel hinzugefügt, Pakete mit kritischen und risikoreichen Schwachstellen in einem Legacy-Projekt zu reduzieren. Diese Aufgabe umfasst die Migration eines Vue 2-Projekts, das die Vue-CLI als Build-Tool verwendet, zu Vite.

Dies ist eine großartige Gelegenheit, Ihren Technologie-Stack zu modernisieren und die Leistungsvorteile von Vite zu nutzen. In diesem Artikel werde ich die wichtigsten Schritte vorstellen, die ich zum Abschluss der Migration befolgt habe.

---

Was ist Vite?

Vite (ausgesprochen „veet“) ist ein Build-Tool, das eine schnellere (und tatsächlich schnelle) und optimierte Entwicklungserfahrung für moderne Webprojekte bietet.

Mit Vite erhalten Sie deutlich verkürzte Build-Zeiten, einen rasend schnellen Entwicklungsserver und einen vereinfachten Konfigurationsprozess.

---

Migrationsschritte

1. Paket.json aktualisieren

Der erste Schritt besteht darin, alle Vue-CLI-Abhängigkeiten aus dem Projekt zu entfernen. Dazu gehören Babel-bezogene Pakete, die Konfigurationsdatei babel.config.js und Core-js-Abhängigkeiten.

<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>

Wenn Ihre ESLint-Konfiguration „babel-eslint“ als Parser verwendet, müssen Sie ihn ersetzen.

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

Ich habe meine ESLint-Konfiguration von .eslintrc auf das moderne eslint.config.mjs-Format migriert und ESLint auf Version 8 aktualisiert, was ich wärmstens empfehlen kann.

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

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

Nachdem ich diese Abhängigkeiten bereinigt hatte, fügte ich Vite und ein Plugin für die Vue-Integration hinzu:

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

---

2. Vite einrichten

Wie viele andere Bibliotheken verwendet Vite eine Konfigurationsdatei (vite.config.js) im Projektstammverzeichnis, um Build- und Entwicklungsoptionen zu definieren. Hier ist ein einfacher Ausgangspunkt:

<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. Verschieben und aktualisieren Sie index.html

In Vue CLI befindet sich die Datei index.html normalerweise im öffentlichen Ordner. Vite geht jedoch davon aus, dass es sich im Stammverzeichnis des Projekts befindet. Verschieben Sie die Dateien in das Stammverzeichnis und aktualisieren Sie alle Pfadverweise nach Bedarf.

<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 einschließen, da wir keine automatische Injektion mehr durchführen.

---

4. Umgebungsvariablen aktualisieren

Vite behandelt Umgebungsvariablen unterschiedlich. Stellen Sie sicher, dass Sie die .env-Datei aktualisieren oder erstellen und allen Variablen, die Sie verfügbar machen möchten, das Präfix VITE_ hinzufügen. Zum Beispiel:

<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. Skript aktualisieren

Schließlich habe ich das Skript in package.json aktualisiert, um die Vite-Binärdateien anstelle der Vue-CLI zu verwenden. Sie sehen jetzt so aus:

<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>

---

Mit diesen Änderungen können Sie jetzt Ihre Vue 2-Projekte mit Vite ausführen und alle damit verbundenen Vorteile genießen, insbesondere die verbesserte Build-Leistung.

---

Nächste Schritte

In meinem nächsten Artikel werde ich erläutern, wie man Nightwatch ohne das Vue CLI-Plugin aktiviert und Jest zu Vitest migriert. bleiben Sie dran!

---

Wenn Sie Fragen haben oder Ihre eigenen Erfahrungen mit Vite teilen möchten, hinterlassen Sie gerne einen Kommentar! ?

Das obige ist der detaillierte Inhalt vonMigration eines Legacy-Projekts von Vue CLI zu Vite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!