【Vite】外部端末から開発環境へアクセスする方法

方法はpackage.jsonに設定を追記する方法とvite.config.jsに設定を追記する方法の二通りあり、どちらでも同じことが可能です。

package.jsonに--hostを追加


{
	"name": "vite",
	"private": true,
	"version": "0.0.0",
	"scripts": {
		"dev": "vite --host",
		"build": "vite build",
		"preview": "vite preview"
	},
	"devDependencies": {
		"vite": "^2.8.0"
	}
}

vite.config.jsにserver: { host: true }を追記


import { defineConfig } from "vite";

export default defineConfig({
    server: {
        host: true,
    },
});

アクセス方法

上記設定後にnpm run devコマンドでローカルサーバーを起動するとNetworkという項目が出るので、その右にあるURLからアクセスできます。


npm run dev

  vite v2.8.6 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.11.1:3000/

  ready in 95ms.

参考