VS Code调试Vue CLI 3工程

问题

使用VS Code来调试Vue工程。

VS Code

插件

这里假设npm，vue CLI这些东西都已经安装好来。
VS Code依赖的插件如下：

• Vetur
• 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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

这里的URL改成实际的URL就可以了。

vue.config.js

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

Vue CLI 3启动工程

npm run serve

VS Code启动调试进程

参考

• Using Vue in Visual Studio Code
• Debugging in VS Code