はじめに

非常に基本的な手順なのですが、なかなかそのものズバリを見つけられなかったので自分で書きました。

そもそも弊社でももう Vue3 に移行して久しいので、新規で Vue2.x のプロジェクトを立ち上げることはほぼありません。にも関わらずこの記事を書いたのは、既存のVue2 プロジェクトを Vue3 に移行する際に Vue2 の段階で vite に移行しておいたほうが Vue3 への移行がスムーズではないかと思ったからです。そのためには素の Vue2.7＋Vite のプロジェクトを新規作成し、ファイルの比較を行いながら移行した方が良いと思いました。

そのため、ここでは「VueCLI で Vue2.7 プロジェクトを作ってからそれを Vite 化する」のではなく、「Vite プロジェクトを作って、それをVue2.7 化する」という手順にしました。その方がクリーンな状態を見れるからです。VueCLI のプロジェクトを Vite 化する方法はたくさん見つかりますが、ゴミがたくさん残って捨てるのに困ると思います。なのでクリーンな状態を作っておくことで最終的に目指す形を確認できるというのが重要だと思いました。

手順

Vite プロジェクトを作成します。

$ npm init vite
? Project name: » vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others
? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript

注意点として、Select a framework: で "Vue" を選んでしまうと Vue3.x が入ってしまいます。ここでは Vue.2.7 を使いたいので "Vanilla" を選びあとから Vue2 を入れます。

Vite サンプル画面の表示確認

cd vite-project
npm install
npm run dev

http://localhost:5173/ にアクセスし、以下のような Vite のサンプルページが表示されることを確認します。

Vue2.7 化

Vue2 のインストール

npm install vue@2.7.14
npm install -D vite
npm install -D @vitejs/plugin-vue2

vite.config.js の作成

touch vite.config.js

vite.config.js ファイルの中身は plugin-vue2 の公式リポジトリのドキュメント通りにします。
https://github.com/vitejs/vite-plugin-vue2

vite.config.js

// vite.config.js
import vue from '@vitejs/plugin-vue2'

export default {
  plugins: [vue()]
}

サンプルソースを Vue で書き直す

このまま実行しても相変わらず Vite のサンプルが表示されるだけなので、以下のように書き換えます。

main.js

import Vue from 'vue/dist/vue.esm';

new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    },
    template: `<div>{{message}}</div>`,
})

これで実行します。

npm run dev

以下のような簡素な Hello World が表示されればOKです。

以上になります。