【Vue.js】Viteでの開発環境構築
更新日：2026/01/15
以前、Reactの開発環境をViteで構築しました。
ViteはVue.jsにも対応しているので、今回はVue.jsの開発環境を構築する方法をお伝えします。
Node.jsのインストール
ViteはNode.jsで動作します。
（2025/12月現在では20.19以降、22.12以降。テンプレートによってはさらに高いバージョンが必要）
インストールしていない、またはバージョンが低い場合は、事前にインストールしておきましょう。
WindowsとMacは、次のページからインストーラーを取得
■Node.jsダウンロード
その他のＯＳは、次ページを参照
■パッケージマネージャを利用した Node.js のインストール
ViteとVue.jsのインストール
JavaScriptで開発を行う場合は、次のコマンドを実行。
npm create vite@latest <PROJECTNAME> -- --template vue
TypeScriptで開発を行う場合は、次のコマンドを実行。
npm create vite@latest <PROJECTNAME> -- --template vue-ts
<PROJECTNAME>は、任意の文字列（プロジェクト名）に置き換えてください。
指定した名前でフォルダが作成されます。
どちらかのコマンドを実行すると、rolldown-viteをインストールするかどうかの質問が表示されます。
※インストーラーのバージョンによっては表示されなかったり、異なる質問が表示される可能性があります。
* Use rolldown-vite (Experimental)?:
| Yes
| > No
—
Experimentalは実験的という意味です。
「実験に協力してあげるよ！」という人以外は No でよいでしょう。
最終確認です。Yesを選択してエンターを押すとインストール作業が開始します。
* Install with npm and start now?
| > Yes / No
—
インストールが終わると、開発サーバーが実行されるので終了する。（コマンドプロンプトならCtrl+C）
> vite-project@0.0.0 dev
> vite
VITE v7.2.7 ready in 251 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
終了せずにブラウザで http://localhost:5173/ にアクセスすると、初期設定でのアプリを確認できます。
開発中のデバッグ
Viteは開発用のWebサーバーが用意されています。
次のコマンドを実行すると、コードのエラーチェック後に開発用サーバーが起動じます。
npm run dev
ブラウザで「http://localhost:5173/」にアクセスすると、作成したアプリが表示されます。
ブラウザの開発ツールを開いてデバッグしましょう。
また、開発サーバー実行中にソース（cssも含む）を変更して保存すると、ブラウザ上のアプリに反映されます。
リリース用ファイルの作成
デバッグが完了したらビルドを行い、次のコマンドを実行してリリース用のファイルを生成します。
npm run build
少し待つとビルド結果が表示されます。
> test@0.0.0 build
> vue-tsc -b && vite build
vite v7.3.1 building client environment for production...
✓ 18 modules transformed.
dist/index.html 0.45 kB │ gzip: 0.29 kB
dist/assets/index-UdvnZh6r.css 1.26 kB │ gzip: 0.64 kB
dist/assets/index-C-MhGW3J.js 61.36 kB │ gzip: 24.63 kB
✓ built in 341ms
生成されたファイル一式は、distフォルダに出力されます。
distフォルダ内のファイルを本番サーバーにアップロードしましょう。
更新日：2026/01/15
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
