[英]Debug vue-cli 3 generated app from Visual Studio Code
我使用 vue-cli 3.0.0-rc.3 生成了一个应用程序
现在我想使用 Visual Studio Code (Debugger for Chrome) 对其进行调试,但是我似乎找不到打开 sourceMaps 的选项。
我在 VSCode 中设置了断点,但没有命中。 如果我在 vue.config.js 中指定:“sourceMaps: true”,则会收到错误“vue.config.js 中的选项无效:不允许使用“sourceMaps””
需要设置什么选项才能进行调试?
根据官方食谱,需要完成以下步骤:
必须编辑 vue.config.js 文件并添加:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
然后 launch.json 应该是这样的:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
在这些步骤之后,断点开始按预期工作。
除了上述之外,我还必须按照这篇文章中的步骤进行操作: Visual Studio Code 断点出现在错误的位置
特别是设置 sourceMapPathOverrides 属性。 终于让我的断点在使用 Vue.js 的 Visual Studio Code 中工作。 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.