VSCode Debugger for Chrome vue 配置文件

在项目根目录 config/index.js 中修改

将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'

修改这项是为了vscode中的断点能够正确定位到行

在.vscode文件下创建lauch.json内容如下(ps:这个文件一般会自动创建)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "timeout": 60000,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "timeout": 60000,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "timeout": 60000,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}
复制代码

官方文档连接

转载于:https://juejin.im/post/5cf8acca6fb9a07ef90c8993