WSL2中Vite构建的React应用无法在localhost:8080本地访问

我来帮你梳理下这个问题，WSL2的网络模型和Windows本身是隔离的，这种“外部能访问、内部看不到监听”的情况其实挺常见的，咱们一步步排查解决：

第一步：先确认Vite实际监听的IP #

你先在WSL终端里执行 hostname -I，会得到WSL虚拟机的内部IP（一般是172.xx.xx.xx这类格式），接着试试用这个IP访问：curl http://<你的WSL内部IP>:8080。如果能正常返回页面内容，说明Vite已经在监听0.0.0.0，但WSL的localhost转发机制导致内部localhost没映射上。

第二步：强制Vite绑定到WSL的localhost #

如果还没创建自定义Vite配置，现在新建一个vite.config.js文件，添加以下配置：

export default {
  server: {
    host: '127.0.0.1', // 明确绑定到WSL本地的回环地址
    port: 8080,
    strictPort: true // 确保端口被占用时直接报错，避免Vite自动切换端口
  }
}

保存后重新运行npm run dev，再在WSL里测试curl http://localhost:8080，同时用netstat -nltp | grep 8080或者lsof -i :8080检查端口监听状态。

第三步：检查WSL2的端口转发设置 #

如果上面的方法没用，可能是WSL2的端口转发出了问题。你需要打开Windows的管理员PowerShell，执行：

netsh interface portproxy show all

看看有没有把8080端口从Windows转发到你的WSL内部IP。如果没有，手动添加一条转发规则：

netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=8080 connectaddress=<你的WSL内部IP> connectport=8080

添加完成后回到WSL终端，再测试curl访问。

额外小提示 #

• 先确认WSL里没有其他进程占用8080端口，执行ss -tulpn | grep 8080就能检查
• 有时候WSL的网络会抽风，执行wsl --shutdown关闭WSL再重新打开终端，可能能解决一些奇怪的端口问题

内容来源于stack exchange