Viteが自動更新しない場合の対処法

Viteが自動更新しない場合の対処法

起きた問題

viteを使っていてhtmlファイルやJavaScriptファイルを更新しても、ブラウザーで反映されない

環境

WSL (Windows Subsystem for Linax)を入れてコマンドラインを使用
WSLがインストールされている場所とは別の場所(Eドライブに作ったディレクトリ)にviteを突っ込んだ

解決策

WSL内にviteを入れて、index.htmlやmain.jsなどを更新すれば、ホットリロード(ファイルの上書き保存と同時にブラウザが更新)されるようになる

↓のようなWSLと無関係の場所にviteを入れても、ホットリロードは機能しません。

↓のようにWSLのインストールされているディレクトリ内にviteをインストールすれば、ホットリロードが有効になります。

なお、viteを入れるときにコマンドラインに打ち込むのは、

npm create vite@latest

cd vite-project

npm install

npm run dev

※ cd vite-project は、npm create vite@latest の実行後にProject nameを変更せずデフォルトのままにした場合に入力

 

WSL内にviteを入れれば、下記プリントスクリーンで

[vite] page reload main.js

と出ていることからもわかるように、ホットリロードがかかります。

 

viteカテゴリの最新記事