Vite启动后提示“Network: use `--host` to expose“,且无法通过网络IP访问服务

当使用Vite构建Vue项目并尝试通过局域网访问时,遇到无法连接的问题。该问题源于服务未暴露在局域网中。解决方法包括:1) 修改vite.config.js配置,将server.host设为'0.0.0.0';2) 使用Vite CLI添加--host 0.0.0.0参数;3) 更新npm脚本,在dev或serve命令后添加--host 0.0.0.0。这些步骤将允许局域网内的其他设备通过IP+端口访问服务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录


起因

当使用 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

问题原因

局域网 中另一台设备需要访问该服务时,必须通过本机 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'	// ← 新增内容 ←
  }						// ← ← ← ← ← ←
}

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.

3. 修改 npm 脚本

修改 package.json 文件中 scripts 节点下的脚本,如下:

"scripts": {
  "dev": "vite --host 0.0.0.0",
  "build": "vite build",
  "serve": "vite preview --host 0.0.0.0"
}

END

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值