VS Code调试Vue.js

安装Debugger for Chrome插件

打个VS Code搜索Debugger for Chrome插件并安装

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

更新webpack配置

去config/index.js并找到devtool。将其更新为：

devtool：'source-map'

开始调试

• 设置断点
• 启动应用npm start
• 转到Debug视图，选择'vuejs：chrome'配置
• http://localhost:8080被打开