1. 设置vue.config.js
以便能够准确命中断点
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
2. 打开调试配置文件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": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
3. 在终端运行程序,yarn serve
, npm run serve
,或者在vue-ui中启动均可
4. 点击debug绿色小三角,或者F5启动调试
作者:Angeladaddy
链接:https://www.jianshu.com/p/9f98c02ac2ab
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。