Viteとは

Vite は、一言でいうとフロントエンドのめっちゃ早いビルドツールです。 v2.x では以下のテンプレートに対応しています。

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

Vue CLIで作成したプロジェクトをViteに置き換える

vue-cli-plugin-viteをインストール

Vue CLI で作成したプロジェクトを Vite に置き換えるために vue-cli-plugin-vite をというプラグインを使います。

vue-cli-plugin-vite

out-of-box vite dev for vue-cli project. Latest version: 1.5.0, last published: 4 years ago. Start using vue-cli-plugin-vite in your project by running `npm i vue-cli-plugin-vite`. There are 1 other projects in the npm registry using vue-cli-plugin-vite.

www.npmjs.com

これは開発ビルドのみに Vite によるビルドを適用するパッケージであり、コードベースへの変更なしに適用できることを謳っています。

以下のコマンドを実施します。

$ vue add vite
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N) 

まだコミットされたいない変更がある場合、先にコミットかスタッシュすることを推奨されます。 コミットされていない変更はないので y を入力します。

インストールが完了すると、bin/vite というファイルが生成され、package.json に vite コマンドが追加されます。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
+    "vite": "node ./bin/vite"
  },

npm run vite コマンドで開発サーバーを起動できます。

Vue CLIとの比較

正確に計測はできてないですが、おおむね以下のとおりでした。

修正が必要だったところ

コードベースの変更ゼロを謳ってるとはいえ、いくつか修正が必要な箇所が存在したので上げていきます。

コンポーネントをimportする際に拡張子を省略しない

以下のような import の書き方をしているとファイルを読み込むことができずエラーとなりました。

- import AppButton from '@/components/AppButton
+ import AppButton from '@/components/AppButton.vue

TypeScript で SFC を記述している場合には大丈夫かと思われますが、注意が必要です。

requireは使えない

require('xxx') の構文は使うことができないので、該当の箇所は import 文に置き換える必要があります。

- require('vue-flash-message/dist/vue-flash-message.min.css')
+ import 'vue-flash-message/dist/vue-flash-message.min.css'