为什么 Chrome 远程调试连不上我手机上的 Vue 页面？

❤逸翔提问于 2026-03-29 17:03:15 阅读 2

工具

我在用 Chrome 的 Remote Debugging 调试安卓手机上运行的本地 Vue 项目，电脑和手机都连了同一个 Wi-Fi，也打开了 USB 调试，chrome://inspect 里能看到设备，但点进去是空白页，控制台也没报错。我本地开发服务器是 vite 启的，默认 host 是 localhost，是不是这个原因？

我试过把 vite.config.js 里的 host 改成 0.0.0.0，手机也能通过 IP 地址访问页面，但 inspect 里还是打不开 DevTools。这是我的组件代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello' }
  },
  methods: {
    updateMessage() { this.message = 'Updated!' }
  }
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

长孙家轩 Lv1

你猜对了，localhost 确实是问题所在。Vite 默认把开发服务器绑在 localhost 上，这意味着它只监听本地回环地址，其他设备无法访问。

你已经把 host 改成 0.0.0.0 是正确的第一步，这样能让 Vite 监听所有网络接口。不过为了调试正常工作，你还得确认几件事：

1. 在 vite.config.js 里除了设置 host: '0.0.0.0'，记得加上 port 配置，比如 port: 3000 这样，保证端口固定
2. 手机浏览器访问的时候用你的电脑局域网IP，而不是 localhost
3. Chrome inspect 要能工作，还得确保防火墙允许这个端口的连接

顺便提醒下安全问题：开放 0.0.0.0 让任何人可以访问你的开发环境，最好限制到特定 IP 段或者用完就关掉。还有就是别在开发环境中放敏感数据，谁知道谁连上来呢。

给你个简单的配置参考：

export default {

  server: {

    host: '0.0.0.0',

    port: 3000,

    strictPort: true

  }

}

试试这些调整，应该就能解决你的问题了。要是还不行，检查下手机和电脑是不是真的在同一个子网里。这种网络问题有时候挺让人头疼的。

2026-03-29 17:04