如何在同网络移动设备访问自定义本地域名的Vite Vue应用？

可以实现，但需要完成两项关键配置：

1. 让Vite服务器允许外部设备访问 #

默认Vite只监听localhost，导致同一网络的移动设备无法通过IP或自定义域名连接。修改项目根目录的vite.config.js（或vite.config.ts），添加server.host配置：

export default {
  server: {
    host: '0.0.0.0', // 监听所有网卡地址
    port: 5173 // 保持你当前使用的端口
  }
}

重启Vite服务后，先确认电脑本身能通过内网IPv4（比如192.168.3.100:5173）访问应用，同时检查电脑防火墙是否放行该端口（Windows防火墙需允许Vite相关程序通过，Mac在「系统设置-网络-防火墙」中添加例外）。

2. 给移动设备配置自定义域名映射 #

移动设备没有你电脑上的hosts配置，所以不知道test.local对应哪台机器，需要手动添加映射：

• Android设备：
  需先获取root权限，找到/system/etc/hosts文件，添加一行：

  192.168.3.100 test.local  # 替换成你的电脑内网IPv4地址
  

  保存后重启Wi-Fi连接即可生效。
• iOS设备：
  • 未越狱：可以用AdGuard等支持自定义DNS规则的APP，添加一条test.local → 你的电脑内网IPv4的映射；或者开启Mac的「互联网共享」，在共享的DNS设置中添加该域名映射，让iOS设备连接共享的Wi-Fi。
  • 已越狱：直接修改/etc/hosts文件，添加和Android一样的映射内容。

补充：解决之前IPv4无法连接的问题 #

如果之前用电脑IPv4+端口连不上，大概率是Vite没配置host: '0.0.0.0'，或者防火墙拦截了端口，先把这两个问题解决，再配置自定义域名会更顺畅。

内容的提问来源于stack exchange，提问作者Fishlex