WSL2 Vue服务localhost可访问但NAT IP无法对外暴露如何解决

Vue 本地开发服务器（Vue CLI Service / Vite Dev Server）默认仅绑定127.0.0.1回环地址，仅接收来自WSL内部回环接口的请求，不会监听eth0虚拟网卡上的外部访问请求，因此通过WSL的NAT IP 172.24.76.40:8080访问时会直接触发连接拒绝。
你配置的Flask服务之所以能正常通过NAT IP访问，是因为Flask启动时已经显式指定了绑定0.0.0.0地址，会监听所有网卡的对应端口请求。

• 修改Vue开发服务的监听配置，绑定所有网卡地址
  根据你使用的构建工具选择对应配置方式：
  • 若使用Vue CLI（项目根目录存在vue.config.js文件）：
    方式1：修改项目根目录下的vue.config.js，添加devServer配置项：

    module.exports = {
      // 其他已有配置保持不变
      devServer: {
        host: '0.0.0.0',
        port: 8080, // 保持原有端口配置即可
      }
    }
    

    方式2：直接修改package.json中的启动脚本，添加host参数：

    {
      "scripts": {
        "serve": "vue-cli-service serve --host 0.0.0.0"
      }
    }
    

  • 若使用Vite（项目根目录存在vite.config.js/vite.config.ts文件）：
    方式1：修改vite.config配置文件，添加server配置项：

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    export default defineConfig({
      plugins: [vue()],
      // 其他已有配置保持不变
      server: {
        host: '0.0.0.0',
        port: 8080
      }
    })
    

    方式2：直接修改启动脚本，添加host参数：

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

• 重启Vue开发服务，在WSL终端执行curl http://172.24.76.40:8080验证，若能正常返回HTML页面内容，说明服务绑定配置生效。
• 配置Windows侧端口转发与防火墙规则：
  1. 在Windows高级防火墙中添加入站规则，开放TCP 8080端口
  2. 以管理员权限打开PowerShell，执行端口转发命令：

  netsh interface portproxy add v4tov4 listenport=8080 listenaddress=0.0.0.0 connectport=8080 connectaddress=172.24.76.40
  

• 验证连通性：同一局域网内的手机访问Windows主机的局域网IP+8080端口（即http://192.168.1.156:8080）即可正常打开Vue页面。

注意：WSL2的eth0网卡IP为动态分配，每次WSL重启后IP可能发生变化，若重启后访问失效，需要重新查询WSL的eth0 IP，同步更新portproxy规则中的connectaddress值。

内容的提问来源于stack exchange，提问作者Luca P.