Vite项目无法通过IP+端口的方式访问开发服务

Vite项目无法通过IP+端口的方式访问开发服务

前情

最近启动了一个新项目，技术栈由我自主决策，最终我选择了 Vue3 +Vite 来开发

坑位

最近在项目开发中，深刻感受到 Vite 的开发体验确实出色，但遇到一个实际问题：当需要通过本地服务把当前开发进度发给产品，提前确认 UI 设计、交互逻辑等细节时，发现只能通过localhost访问服务，用本机 IP 却无法正常打开，导致产品没法通过你的本机 IP 访问项目直观查看效果，影响了确认效率

Why?

Vite 开发服务默认只监听 localhost 地址（即 127.0.0.1），所以控制台默认只会显示 localhost 形式的访问链接，这是出于安全性和默认配置的设计

1. 默认配置限制
   Vite 的开发服务器（基于 connect 和 chokidar）默认配置中，server.host 参数的默认值为 'localhost'，这意味着服务仅绑定到本地回环地址，不对外网或局域网开放，因此本机 IP 无法访问。

2. 安全性考量
   限制为 localhost 可避免开发中的项目被同一局域网内的其他设备意外访问，减少未完成代码的暴露风险。

3. 多网络环境兼容
   部分设备可能存在多个网络接口（如有线、无线、虚拟机网卡等），默认不指定具体 IP 可避免因网络环境复杂导致的绑定错误。

所以现在启动项目控制台显示如下，只提示了通过localhost访问的链接

解决方案

方式一：修改vite的server项的配置，增加host: ‘0,0,0,0’（表示监听所有网络接口）

方式二：修改package.json文件的npm scripts项，通过脚本命令传参

按以上二种方式之一修改后再启动项目，可以看到控制台已打印出本地ip访问的 址，就这样通过ip也能访问本地服务了

期望

如果你有其它解决方法，欢迎留言不吝分享，谢谢，一起学习一起进步