概要

バックエンドをSpringBoot、フロントエンドをVue3.js × VueCLI × JavaScriptで開発していました。
しかし、次の理由からビルドツールをVueCLIからViteに、言語をJavaScriptからTypeScriptに切り替えました。

なぜViteに切り替えたのか

VueCLIのビルドスピードにストレスを感じ始めたからです。開発では膨大な回数ビルドするので、1回のビルドにかかる時間をできるだけ短くしたいと考えました。

なぜTypeScriptに切り替えたのか

Javaをメインで触っていることもあって、JavaScriptみたいに型の制限が緩い言語よりも型をちゃんと宣言する言語を使いたいと考えました。

環境

ツール

SpringBoot
- Eclipse
Vue3.js
- VSCode

バージョン

node
- 18.15.00
npm
- 9.6.3

インストール

まず、SpringBootのプロジェクトがあるディレクトリまで移動します。特に設定を変更していなければ、workspaceディレクトリの下にプロジェクトと同じ名前のディレクトリがあると思います。
プロジェクトのディレクトリまで移動したら、ドキュメントに従って次のコマンドを実行します。

npm create vite@latest frontend -- --template vue-ts
# npm create vite@latest [プロジェクト名] -- --template [テンプレート名]

実行が完了すると次のメッセージが出力されます。

Done. Now run:

  cd frontend
  npm install
  npm run dev

メッセージに書かれてある通りにコマンドを実行していくと、次のメッセージが出力されます。

> frontend@0.0.0 dev
> vite


  VITE v4.2.1  ready in 611 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

試しに http://localhost:5173/ に飛んでみると、Viteの画面が出てきました。これでインストールは完了です。

ビルド先の変更

ドキュメントに従って、vite.config.tsを次のように編集します。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // これを追加
  build: {
    outDir: '../src/main/resources/static', // ビルド先
    emptyOutDir: true,
  },
});

emptyOutDirは無くても構いませんが、これを設定しないとビルドするたびに警告が出ます。
編集が終わったら実際にビルドしてみます。

npm run build

SpringBootのsrc/main/resources/static/にフォルダやファイルが生成されていたら成功です。

終わりに

やってみると意外と簡単にできました。
次はJavaScriptからTypeScriptに移行したときに、どのようにコードを書き替えたのかを記事にしようと思います。