Vue-cli から Vite へ移行ガイド
Vueの開発支援ツール Vue-cli から Viteへの移行、今回もムダにハマったので覚書しておくことにしました。
移行が必要な理由
古いプロジェクトをメンテするときに node.jsのバージョンアップやモジュールのバージョンに絡んで、vue-cli 縛りなモジュールが非対応で行き止まりになることがあり、今回もViteに載せ替えとなりました。
vue-cliを使うせいでモジュール問題が発生するとかバカバカしいので、まだ使用している古いプロジェクトがある方にはぜひ移行をオススメします。
注意事項：
gRPCを使用している場合は2024年現在はgRPC関連のモジュールがwebpack＆vue-cliを前提にしているようで移行が難しい可能性があります。
tsを利用している場合もts-loader関連で調整が必要になるけーすがあるようです↓
Viteに移行する一般的なメリット
爆速コンパイラ
ツリーシェイキングとコード分割 （コード縮小による高速化）
組み込み開発サーバーによる高速リロード
ネイティブ ES モジュール
などが謳われています。
特にコンパイラは爆速なのでこれだけでも利用するメリットは十分あります。
本題： Vue+Vite 移行の手順
恐らくですが方法は２つあり、後述のpackage.jsonなどに手で修正をいれる方法（１）と、vite +vueのプロジェクトをゼロから作り、コードを移植していく方法（２）です。今回は極小さいプロジェクトだったので１の方法で行いました。
1️⃣ package.json の変更
１−１．削除
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove
"sass-loader": "^8.0.2" // remove
１−２．追加
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",2️⃣ 最新ブラウザ用に最適化
ほとんどのモバイルおよびデスクトップのエバーグリーンブラウザがすべての ES6 機能をほぼ完全にサポートしているため、依存関係から Babel を完全に削除できる前提の変更です
// package.json
"babel-eslint": "^10.1.0", // remove
"core-js": "^3.6.5", // remove
// .eslintrc
// remove
parserOptions: {
parser: "babel-eslint",
},3️⃣ vite.config.js を追加
alias には必要に応じてassetsなどのpath定義を追加します。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require("path");
export default defineConfig({
//...
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});この部分でミスると、ブラウザの実行確認で何も表示されず、
５０３
になる場合があります。
4️⃣ index.html の移動 （重要）
index.html ファイルを public ディレクトリではなくプロジェクトのルートへ移動します。 合わせて、いくつかの修正を行います。
// index.html
<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">main.jsは自動で挿入されないので追記。
// index.html
<script type="module" src="/src/main.js"></script>
index.html がルートにないと、ブラウザでの実行確認で何も表示されず、
４０４
にななったりします。
5️⃣ スクリプト更新
スクリプト実行のコマンド定義を修正します。
例えば、localでは以下のように実行する場合、
$ yarn devpackage.json の実行適宜を vue-cli から vite へは以下のように変更となります。
// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview",lint を有効にしている場合は、lint スクリプトを更新して eslint を直接実行する必要があります。
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"6️⃣ 環境変数を更新
環境変数の定義名とアクセスコードを変更する必要があります。
具体的には環境変数名の規則が VUE_APP_ から VITE_ になりました。
定義
// .env
// vue-cliの場合
VUE_APP_LOCAL='127.0.0.1:8000
// viteの場合
VITE_LOCAL='127.0.0.1:8000'
コードの変更
vite環境では process.env が使えなくなり、代わりに import.meta.env でアクセスします。
// router/index.js
(-) base: process.env.BASE_URL, //remove
(+) base: import.meta.env.BASE_URL,.env のファイル名と切り替え
vite環境では実行されるモードで .evn を切り替えることが出来ます。
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
例えば以下のように .env を作成しておきます。
モードの切替
mode を production や staging に切り替えてプロジェクトを生成するには、以下のようにbuild時に指定をします。
yarn build --mode production ※mode そのものについては以下でアクセスできます。
import.meta.env.MODE
参考資料：
Viteの動作ってどんな？
Vite vs. Webpack: 直接比較
Vite adoption guide
いいなと思ったら応援しよう！
