Viteでnpm run dev実行後のURLが消える
Viteでnpm run devを実行時にはlocalhostのURLがターミナル上に表示されますが、vite.config.tsやtsconfig.jsonなどのファイルを更新すると、URLの表示が消えてしまいます。
これは、Viteのデフォルト設定でターミナル出力をクリアする仕様になっているためです。
この仕様はViteの設定ファイル (vite.config.ts) のdefineConfigに「clearScreen: false」を追記することでターミナル出力をクリアする設定を無効化できます。
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vite.dev/config/
export default defineConfig({
clearScreen: false,
plugins: [react()],
})この設定であれば、ファイルを更新してもターミナル出力がクリアされないため、URLがターミナル上に表示され続けます。
常にPort 5173を固定で使用しているケースなら不要な設定ですが、実際の開発現場ではlocalhostのURLのポートが常に1つしか使われていないなんてことはほとんどないです。
「clearScreen: false」の設定をしておけばURLがターミナル上から見えなくなって、「あれ？起動中のこれのURLは何だっけ？」みたいなことが起こらなくなるので、設定しておくことをオススメします。
