2

我开始使用 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：

截图一：VS Code JS调试器成功连接Chrome调试Vue.js

这是我成功使用的 VS Code 的 launch.json 文件： 屏幕截图 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-拥有. 我想在本地使用 'swa' 模拟器的主要原因是因为它有助于轻松地路由 API 调用，并允许轻松简单地测试身份验证。只是它在 Vue.js 中表现不佳。

这是我尝试运行 SWA 模拟器的命令行： 屏幕截图 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 应用程序和功能，并希望能在这方面提供任何帮助。谢谢你。

4

1 回答 1

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。我是一只非常快乐的熊猫！感谢安东尼的大力协助。

于 2021-09-09T12:29:48.267 回答