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