利用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 为自定义名称
  }

你可能感兴趣的:(Vue,不懂就问系列,VsCode使用,前端,vue.js,vscode)