Vite启动后提示“Network: use `--host` to expose“,且无法通过网络IP访问服务
原因:
使用 Vite 构建项目后,需要通过局域网中的电脑或手机访问服务调试时,发现通过 IP + 端口无法访问。
重现:
当运行 npm run dev | serve
命令时,会显示以下内容。
问题原因
当局域网中另一台设备需要访问该服务时,必须通过本机IP + 端口 访问。
尝试访问后,发现找不到这个服务,原因是没有将服务暴露在网络中。
解决办法
在控制台会显示 user --host to expose(使用 --host 暴露网络)
通常我们都会在 npm run dev | serve 的后边拼接上 --host
执行 npm run dev | serve --host 后控制台还是会显示 Netvork: user --host to expose
通过查阅文档,发现了三种解决方案:
1、修改 vite.config.js 配置
在根目录下的 vite.config.js 文件中添加以下内容
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { host:'0.0.0.0' } })
2、通过vite cli 配置
执行 npx vite --host 0.0.0.0
命令后,就可以通过 http://192.168.2.32:3000/ 访问了
vite v2.8.6 dev server running at:
> Network: http://192.168.2.32:3000/
> Local: http://localhost:3000/
ready in 543ms.
3、修改npm 脚本
修改 package.json 文件中 scripts
节点下的脚本,如下:
"scripts" : { "dev" : "vite --host 0.0.0.0" , "build" : "vite build" , "serve" : "vite preview --host 0.0.0.0" }, |
未来的我会感谢现在努力的自己。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」