利用vscode调试vue代码

利用vscode调试代码，实测非常好用
注意：现在只支持vue2.x。
1.配置launch.json

{
    
    
        // 使用 IntelliSense 了解相关属性。 
        // 悬停以查看现有属性的描述。
        // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
    
    
                "name": "Launch Chrome",
                "type": "pwa-chrome",
                "request": "launch",
                "url": "http://localhost:8999",
                "sourceMapPathOverrides": {
    
    
                    //配置映射
                    "test://src/*": "${workspaceRoot}/src/*" // 映射的路径
                }
            }
        ]
    }

2.配置webpack output devtoolModuleFilenameTemplate

 output: {
    
    
   ...
    devtoolModuleFilenameTemplate: 'test://[resource-path]' //test 为自定义名称
  }