반응형
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
반응형
'programing' 카테고리의 다른 글
웅변 -> first() if -> exists() (0) | 2022.09.22 |
---|---|
팝업을 위한 작업 디렉토리를 지정하려면 어떻게 해야 합니까? (0) | 2022.09.22 |
PHP5에 오류가 있습니다.동적 라이브러리를 로드할 수 없습니다. (0) | 2022.09.22 |
PHP & mySQL: 2038년 버그: 뭐죠?어떻게 해결할까요? (0) | 2022.09.22 |
Django 모델 폼 객체의 자동 생성 날짜 (0) | 2022.09.22 |