azure - 如何通过 Azure 静态 Web 应用模拟器 (swa) 使用 Vue.js 应用程序的 VS Code JS 调试器？

Question

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

当我按照此处的说明使用 npm runserve 提供 Vue.js 项目时，一切正常:https://v2.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://learn.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 runserve”作为锯子的参数 --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# 函数。我是一只非常快乐的 Pandas !感谢安东尼的大力帮助。