Visual Studio Code에서 생성된 vue-cli 3 앱 디버깅

Visual Studio Code에서 생성된 vue-cli 3 앱 디버깅

vue-cli 3.0.0-rc.3을 사용하여 앱을 생성했습니다.

이제 Visual Studio Code(Debuger for Chrome)를 사용하여 디버깅하려고 하는데 sourceMaps를 켜는 옵션을 찾을 수 없습니다.

VSCode에서 브레이크 포인트를 설정했지만 히트하지 않았습니다.vue.config.js에서 "sourceMaps: true"를 지정하면 "Invalid options in vue.config.js: "sourceMaps" is not allowed"라는 오류가 표시됨

디버깅이 작동하려면 어떤 옵션을 설정해야 합니까?

공식 요리책에 따르면 다음 단계를 수행해야 합니다.

vue.config.filename 파일을 편집하고 추가해야 합니다.

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

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}/*"
      }
    }
  ]
}

이 단계 후 브레이크포인트는 예상대로 동작하기 시작했습니다.

상기와 더불어, 저는 이 투고에 기재된 절차를 따라야 했습니다.Visual Studio 코드 중단점이 잘못된 위치에 표시됨

특히 sourceMapPathOverrides 속성을 설정합니다.드디어 Vue.js를 사용하여 Visual Studio Code에서 작업할 수 있는 중단점을 얻었습니다.:)

언급URL : https://stackoverflow.com/questions/50977685/debug-vue-cli-3-generated-app-from-visual-studio-code