起因
当使用 Vite 构建项目后,需要访问服务调试时,发现通过 IP + 端口无法访问。
官方文档说明不显示地址是因为 IP 没有做配置,所以不能使用 IP 访问本地的项目。
解决方案
1. 修改 vite.config.js 配置
server.host
指定服务器应该监听哪个地址。若设置为 0.0.0.0 将监听所有地址,包括局域网络和公网地址;默认 127.0.0.1。
// https://vitejs.dev/config/
export default defineConfig({
server: {
host:'127.0.0.1'
}
},
})
2. 通过 Vite CLI 配置
执行 npx vite --host 0.0.0.0
命令启动服务。
F:\vue>npx vite --host 0.0.0.0
VITE v3.2.2 ready in 542 ms
[ Local: http://localhost:5173/
[ Network: http://192.168.4.48:5173/
3. 修改 npm 脚本
修改 package.json
中 scripts
结点下的脚本,如下:
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"serve": "vite preview --host 0.0.0.0"
}