vscode中断点调试vue

tips:以下为vue-cli3的环境

动机

当我发现按照vue的官网教程 https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html 无法实现vue在VS code中的断点调试。

亲测有效的方法

• 准备工作

vscode和chrome更新到最新版，vscode中安装Debugger for Chrome插件

• 配置vue.config.js文件(如果没有，在根目录下新增一个)

module.exports = {
	configureWebpack: {
		devtool: 'source-map'
	}
};

• 配置babel.config.js 文件

module.exports = {
  "env":{
    "development":{
      "sourceMaps":true,
      "retainLines":true, 
    }
  },
  presets: [
    '@vue/app'
  ]
}

• 配置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}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        },
    ]
}

• 启动项目 npm run serve
• F5打开调试
  

---

最后感谢阅读，致谢！