如何使用VS Code JS调试器调试搭载Azure静态Web Apps模拟器(swa)的Vue.js应用

核心思路 #

Azure SWA模拟器支持反向代理前端开发服务器，无需加载打包后的dist目录，既保留Vue开发环境的源码映射、热重载能力，也能正常使用SWA模拟器的API路由、认证模拟功能。

操作步骤 #

• 首先启动Vue本地开发服务，保持默认8080端口运行：

  npm run serve
  

• 启动Azure Functions项目，确保运行在7071端口
• 调整SWA模拟器启动命令，代理Vue开发服务而非加载dist目录：

  swa start http://localhost:8080 --api http://localhost:7071
  

  该模式下SWA模拟器默认运行在4280端口，所有前端请求转发到Vue开发服务，API请求转发到Azure Functions，认证、路由规则均正常生效。
• 修改VS Code launch.json 配置，将调试目标地址改为SWA模拟器地址，其余源码映射配置保持原有可用配置即可：

  {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "swa+vue: chrome",
            "url": "http://localhost:4280",
            "breakOnLoad": true,
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
  }
  

• 配置完成后在Vue源码中打上断点，启动VS Code调试配置即可正常调试，和直接调试Vue开发服务体验完全一致。

可选调整 #

如果需要修改SWA模拟器的运行端口，可在启动命令中添加--port参数指定：

swa start http://localhost:8080 --api http://localhost:7071 --port 8000

对应修改launch.json中的url参数为指定端口地址即可。

内容的提问来源于stack exchange，提问作者Derek Van Tonder