如何将 VS Code JS 调试器用于 Vue.js 应用程序和 Azure 静态 Web 应用程序模拟器 (swa)？

Question

我开始使用 Microsoft 提供的 Vue.js 模板创建一个 Azure 静态 Web 应用程序。它工作得很好，只有一个障碍：当我使用 Azure 静态 Web 应用程序模拟器在本地提供站点时，我正在努力使用 VS Code 调试最终缩小的 Vue.js 代码。

当我使用npm run serve 按照此处的说明提供 Vue.js 项目时，一切正常：https://vuejs.org/v2/cookbook/debugging-in-vscode.html。
VS Code 愉快地连接到 Google Chrome JS 调试器，见截图 1：

Screenshot 1: VS Code JS debugger successfully connects to Chrome to debug Vue.js

这是我成功使用的 VS Code 的 launch.json 文件： Screenshot 2

    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "breakOnLoad": true,
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
              },
            //"preLaunchTask": "vue_js_compile_and_start_azure"
        }
    ]
}

当我想按照 Microsoft 说明使用 Azure 静态 Web 应用程序模拟器 ('swa') 时，问题就开始了。为什么我需要它？因为我想带上我自己的 Azure Functions 应用程序并将我的 Azure 静态 Web 应用程序链接到它。有关详细信息，请参阅此页面，我已在云端进行了设置并对其进行了测试，效果很好：https://docs.microsoft.com/en-us/azure/static-web-apps/functions-bring-your-own。我想在本地使用 'swa' 模拟器的主要原因是因为它有助于轻松地路由 API 调用，并允许非常轻松和简单地测试身份验证。只是它在 Vue.js 中表现不佳。

这是我尝试运行 SWA 模拟器的命令行： Screenshot 3

npm run build && ^
swa start ./dist --api http://localhost:7071

它可以工作，让我将我的 SWA 连接到端口 7071 上正在运行的 Azure Functions 应用程序（在另一个单独运行且正在运行的 VS Code 项目中），但问题是它必须使用我项目的“dist”部分，它是由 webpack 从 Vue.js 创建的缩小和丑化的 JS。此外，SWA 服务器需要继续运行，因此 VS Code 调试器永远无法正常启动，我无法像使用之前的命令那样调试和设置断点等。

有什么方法可以为“swa”Azure 模拟器提供一个未缩小的 Vue.js 项目开发版本，可以使用 VS Code 本身成功调试？我不想求助于使用控制台打印来调试，这太糟糕了。我喜欢 Azure 静态 Web 应用程序和功能，并希望能在这方面提供任何帮助。谢谢。

Answer 1

TLDR：我在 Microsoft 的帮助下修复了它（谢谢 Anthony Chu！）

我的 VS Code 项目下的 tasks.json 现在看起来像：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "swa start",
            "command": "swa start http://localhost:8080/ --api http://localhost:7071 --run runserve.cmd",
            "isBackground": true,
            "problemMatcher": [],
            "options": {
                "cwd": "${workspaceFolder}"
            },
            "dependsOn": []
        }
    ]
}

runserve.cmd（这是必需的，因为将 'npm run serve' 作为锯子 --run arg 的参数由于某些奇怪的原因不起作用，比如 cmd 行被切断了？）：

npm run serve

最后是launch.json：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:4280",
            "webRoot": "${workspaceFolder}/src",
            "presentation": {
                "hidden": true,
                "group": "",
                "order": 1
            },
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        }
    ],
    "compounds": [
        {
            "name": "Launch Static Web App",
            "configurations": [
                "Launch Edge"
            ],
            "stopAll": true,
            "preLaunchTask": "swa start"
        }
    ]
}

现在我的两个 VS Code 项目（Vue.js SWA 项目和我的 Azure Functions 项目）非常愉快地共存，通过使用 SWA 模拟器，我可以访问内置的身份验证模拟、路由和所有这些好东西东西。我可以在 VS Code（不是浏览器！）中顺利调试 Vue.js，也可以在我的其他项目中顺利调试 Azure C# Functions。我是一只非常快乐的熊猫！感谢 Anthony 的大力协助。