VS code中断点调试Vue CLI 3项目

动机

当我发现按照vue的官网教程 cn.vuejs.org/v2/cookbook… 无法实现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打开调试

最后感谢阅读,致谢!

你可能感兴趣的:(VS code中断点调试Vue CLI 3项目)