使用VSCode编辑器debug调试Vue代码

环境为 vue-cli3、webpack、vscode

首先需要在VSCode中安装 Debugger for Chrome 插件

下载Chrome debugger

然后在debug配置中添加如下配置

配置调试器

配置代码

{
     "type": "chrome",
     "request": "launch",
     "name": "vuejs: chrome",
     "url": "http://localhost:8080", //改成自己的端口就行
     "webRoot": "${workspaceFolder}/src",
     "breakOnLoad": true,
     "sourceMapPathOverrides": {
         "webpack:///src/*": "${webRoot}/*"
     }
}

webpack的配置

• 使用vue-cli3的话，在vue.config.js中configureWebpack项中添加以下两个配置

  configureWebpack: {
      devtool: 'source-map',// 保证源码正确加载
  },
  

• 使用其他的方式构建项目，在conf/index.js中修改
  将devtool: 'cheap-module-eval-source-map'修改为devtool: 'source-map'