Quasar-cli在VSCode下集成前端调试的配置

1. 在quasar.config.js中添加配置 devtool: 'source-map'

      build: {
          // this is a configuration passed on
          // to the underlying Webpack
          devtool: 'source-map',
      }
    

2. 编辑Debug for chrome（关于Debug for chrome请自行配置）的配置节点，在.vscode下的launch.js,没有需要添加

        {
              "name": "WebClient",
              "type": "chrome",
              "request": "launch",
              "preLaunchTask": "buildQuasar",
              "url": "http://localhost:8080",
              "trace": "verbose",
              "breakOnLoad": true,
              "webRoot": "${workspaceFolder}/Web.Entry/web",//前端主目录
              "sourceMapPathOverrides": {
                  "webpack:///src/*": "${webRoot}/src/*"
              }
          }
      

3. 预先执行quasar dev 命令，编辑.vscode下的task.js,没有需要添加。如果不需要预先执行，可以忽略此步，并去掉上面launch.js的breakOnLoad，preLaunchTask

      {
        "version": "2.0.0",
        "tasks": [
            {
                "label": "buildQuasar",
                "command": "quasar",
                "type": "shell",
                "options": {
                    "cwd": "${workspaceFolder}/Web.Entry/web" //前端主目录
                },
                "args": [
                    "dev",
                ],  
                "problemMatcher": {
                    "owner": "typescript",
                    "fileLocation": "relative",
                    "pattern": {
                      "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
                      "file": 1,
                      "location": 2,
                      "severity": 3,
                      "code": 4,
                      "message": 5
                    },
                    "background": {
                      "activeOnStart": true,
                      "beginsPattern": "• Compiling:",
                      "endsPattern": "DONE  Compiled successfully in"
                    }
                },
                "isBackground": true,
            }
         ]
      }
    

4. Keypoint: chrome调试需要mapsource映射到源代码，下面是我的目录结构，可以供参考