Vite+React使用--host暴露本地环境至移动端加载超时求助

以下是针对该问题的具体排查和解决步骤：

• 尝试切换到标准端口
  Vite默认使用5173端口，部分安卓设备的安全策略可能拦截非标准端口。修改启动脚本指定80端口（需管理员权限）：

  "scripts": {
    "dev": "vite",
    "host": "vite --host 192.168.1.*** --port 80"
  }
  

  启动后直接访问http://192.168.1.***（无需加端口），测试是否能正常加载。

• 强制禁用HTTPS或配置可信证书
  若Vite自动启用HTTPS，安卓Chrome会因自签名证书不被信任拒绝连接：

  1. 强制使用HTTP启动，修改脚本：

     "scripts": {
       "host": "vite --host 192.168.1.*** --https false"
     }
     

     用http://192.168.1.***:5173访问测试。
  2. 若必须用HTTPS，生成并安装自签名证书：
     • 用OpenSSL生成证书：

       openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
       

     • 在vite.config.js中配置证书：

       import { defineConfig } from 'vite';
       import react from '@vitejs/plugin-react';
       
       export default defineConfig({
         plugins: [react()],
         server: {
           host: '192.168.1.***',
           https: {
             key: './key.pem',
             cert: './cert.pem'
           }
         }
       });
       

     • 将cert.pem传输到安卓手机，在系统设置的「安全」选项中安装证书（选择「VPN和应用」用途），之后再访问HTTPS地址。

• 关闭安卓设备的代理设置
  检查安卓手机是否开启了VPN、第三方代理APP或系统代理，这类设置会阻断局域网请求，全部关闭后重试访问。

• 使用0.0.0.0监听所有网卡
  替换指定IP为0.0.0.0，让Vite监听所有可用网络接口：

  "scripts": {
    "host": "vite --host 0.0.0.0"
  }
  

  启动后查看终端输出的局域网地址（通常是http://192.168.1.***:5173），用该地址在手机上访问。

• 检查桌面端网络隔离设置
  若桌面端是笔记本且开启了WiFi热点，需确保无线网卡未开启隔离模式：

  1. 打开「网络连接」设置，找到当前WiFi适配器，右键选择「属性」。
  2. 切换到「高级」选项卡，确认「允许其他网络用户通过此计算机的Internet连接来连接」已启用。

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