起きた問題
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
と出ていることからもわかるように、ホットリロードがかかります。
コメントを書く