rvn*_*ord 6 visual-studio source-maps vue.js
我在学习Vue
。最近我发现有一个错误,Visual Studio
可以有效阻止调试器在客户端脚本的断点处停止(https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot -debug-javascript-code.html)。
我发现,正如我在这里写的:在 Visual Studio 2017 中调试 Vue.js 应用程序,按照https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli中的配方,可以克服这个问题是Visual Studio Code
通过覆盖Source Map
路径来解决的。
让我们考虑以下项目结构:
为了正确解决Source Maps
调试问题,我需要以下launch.json
文件Visual Studio Code
:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\source\\server\\server.js",
"preLaunchTask": "build"
},
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/source/client/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${workspaceFolder}/node_modules/*"
}
}
],
"compounds": [
{
"name": "Vue",
"configurations": [
"Node",
"vuejs: chrome"
]
}
]
}
Run Code Online (Sandbox Code Playgroud)
具有以下内容tasks.json
:
{
"version": "2.0.0",
"tasks": [{
"label": "build",
"command": "npm",
"args": ["run", "build"],
"type": "shell"
}]
}
Run Code Online (Sandbox Code Playgroud)
构建任务本身在其中定义package.json
并包含以下命令:
"build": "cd source/client && vue-cli-service build"
Run Code Online (Sandbox Code Playgroud)
我Visual Studio
可以通过设置适当的属性来镜像它:
但是我还需要以Source Map
某种方式覆盖路径,问题是如何镜像sourceMapPathOverrides
Visual Studio Code
中的选项Visual Studio 2019
?
"webRoot": "${workspaceFolder}/source/client/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${workspaceFolder}/node_modules/*"
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
1098 次 |
最近记录: |