レガシー プロジェクトを Vue CLI から Vite に移行する

最近、レガシー プロジェクトで重大かつ高リスクの脆弱性を持つパッケージを減らすことを目的としたチケットがスプリントに追加されました。このタスクには、Vue CLI をビルド ツールとして使用する Vue 2 プロジェクトを Vite に移行することが含まれます。

これは、テクノロジー スタックを最新化し、Vite が提供するパフォーマンス上の利点を活用する絶好の機会です。この記事では、移行を完了するために私が実行した主な手順を共有します。

---

Viteとは何ですか?

Vite (「ヴィート」と発音) は、最新の 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 ファイルは通常、パブリック フォルダーにあります。ただし、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 を含めます。

---

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. スクリプトを更新します

最後に、Vue CLI の代わりに Vite バイナリを使用するように package.json のスクリプトを更新しました。現在は次のようになります:

<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 プロジェクトを実行できるようになり、Vite がもたらすすべてのメリット、特にビルド パフォーマンスの向上を享受できるようになりました。

---

次のステップ

次回の記事では、Vue CLI プラグインを使用せずに Nightwatch を有効にし、Jest を Vitest に移行する方法を共有します。乞うご期待！

---

ご質問がある場合、または Vite に関するご自身の経験を共有したい場合は、お気軽にコメントを残してください。 ?

以上がレガシー プロジェクトを Vue CLI から Vite に移行するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。