Memindahkan Projek Legasi daripada Vue CLI ke Vite

Baru-baru ini, tiket telah ditambahkan pada pecut kami dengan matlamat untuk mengurangkan pakej dengan kelemahan kritikal dan berisiko tinggi dalam projek warisan. Tugas ini melibatkan pemindahan projek Vue 2 yang menggunakan Vue CLI sebagai alat binaan ke Vite.

Ini adalah peluang yang baik untuk memodenkan susunan teknologi anda dan memanfaatkan faedah prestasi yang ditawarkan Vite. Dalam artikel ini, saya akan berkongsi langkah utama yang saya ikuti untuk menyelesaikan penghijrahan.

---

Apakah itu Vite?

Vite (disebut “veet”) ialah alat binaan yang direka untuk memberikan pengalaman pembangunan yang lebih pantas (dan sememangnya pantas) dan diperkemas untuk projek web moden.

Dengan Vite, anda mendapat pengurangan masa binaan dengan ketara, pelayan pembangunan yang sangat pantas dan proses konfigurasi yang dipermudahkan.

---

Langkah migrasi

1. Kemas kini pakej.json

Langkah pertama ialah mengalih keluar semua kebergantungan Vue CLI daripada projek. Ini termasuk pakej berkaitan Babel, fail konfigurasi babel.config.js dan kebergantungan teras-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>

Jika konfigurasi ESLint anda menggunakan "babel-eslint" sebagai penghurai, anda perlu menggantikannya.

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

Saya telah memindahkan konfigurasi ESLint saya daripada .eslintrc kepada format eslint.config.mjs moden dan mengemas kini ESLint kepada versi 8, yang sangat saya syorkan.

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

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

Selepas membersihkan kebergantungan ini, saya menambahkan Vite dan pemalam untuk penyepaduan Vue:

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

---

2. Sediakan Vite

Seperti kebanyakan perpustakaan lain, Vite menggunakan fail konfigurasi (vite.config.js) dalam direktori akar projek untuk menentukan pilihan binaan dan pembangunan. Berikut ialah tempat yang mudah untuk bermula:

<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. Alihkan dan kemas kini index.html

Dalam Vue CLI, fail index.html biasanya terletak dalam folder awam. Walau bagaimanapun, Vite menjangkakan ia berada dalam direktori akar projek. Alihkan fail ke direktori akar dan kemas kini sebarang rujukan laluan mengikut keperluan.

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

Sertakan main.js kerana kami tidak lagi menyuntik secara automatik.

---

4. Kemas kini pembolehubah persekitaran

Vite mengendalikan pembolehubah persekitaran secara berbeza. Pastikan anda mengemas kini atau mencipta fail .env dan tambahkan awalan VITE_ pada semua pembolehubah yang anda ingin dedahkan. Contohnya:

<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. Kemas kini skrip

Akhir sekali, saya mengemas kini skrip dalam package.json untuk menggunakan binari Vite dan bukannya Vue CLI. Mereka kelihatan seperti ini sekarang:

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

---

Dengan perubahan ini, anda kini boleh menjalankan projek Vue 2 anda dengan Vite dan menikmati semua faedah yang dibawanya, terutamanya prestasi binaan yang dipertingkatkan.

---

Langkah Seterusnya

Dalam artikel saya yang seterusnya, saya akan berkongsi cara mendayakan Nightwatch tanpa pemalam Vue CLI dan memindahkan Jest ke Vitest. nantikan!

---

Jika anda mempunyai sebarang soalan atau ingin berkongsi pengalaman anda sendiri dengan Vite, sila tinggalkan komen! ?

Atas ialah kandungan terperinci Memindahkan Projek Legasi daripada Vue CLI ke Vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!