Linux系统（Ubuntu/Manjaro）下Vite React应用Chrome开发模式无限加载求助

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

• 清空Chrome对应站点的缓存与存储数据
  打开Chrome访问应用页面，按F12打开开发者工具，切换到「Application」面板，找到「Storage」分类，点击「Clear site data」，然后重启页面。只清除当前站点数据，避免影响其他网页。

• 禁用Chrome预加载功能
  在Chrome地址栏输入chrome://settings/preloading，关闭「预加载网页，以提高浏览速度和性能」选项，重启Chrome后再尝试访问应用。Linux下Chrome的预加载机制可能与Vite的热更新服务产生冲突。

• 调整Vite服务器配置
  修改项目根目录的vite.config.js（或.ts），添加以下配置后重启Vite服务：

  export default defineConfig({
    server: {
      host: '0.0.0.0', // 绑定所有可用IP，避免localhost解析异常
      watch: {
        usePolling: true, // 启用轮询模式，替代Linux原生文件监听
      },
      hmr: {
        overlay: false, // 关闭HMR错误弹窗，避免阻塞页面渲染
      }
    }
  })
  

• 排查网络请求阻塞点
  打开Chrome开发者工具的「Network」面板，勾选「Preserve log」后刷新页面，观察请求状态：

  • 查看是否有请求长时间处于pending状态
  • 确认bundle编译文件是否成功加载
  • 检查Vite的HMR websocket连接是否正常建立（在「Network」的「WS」分类下查看）

• 检查系统防火墙与代理
  临时关闭Ubuntu的UFW防火墙测试：

  sudo ufw disable
  

  如果关闭后恢复正常，再添加Vite端口的允许规则（以默认3000端口为例）：

  sudo ufw allow 3000/tcp
  sudo ufw enable
  

  同时检查系统是否开启全局代理，确认Chrome未自动转发localhost请求。

• 切换Chrome版本
  尝试升级到最新稳定版或降级到上一个大版本，Ubuntu下安装最新Chrome的命令：

  wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
  sudo dpkg -i google-chrome-stable_current_amd64.deb
  sudo apt install -f
  

• 测试生产构建预览
  先构建生产版本再预览，判断问题是否局限于开发环境：

  npm run build
  npm run preview
  

  如果生产预览正常，说明问题出在开发环境的HMR或DevServer配置；如果仍异常，可能是项目代码在Linux Chrome下存在兼容性问题。

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