Vuejs - VSCODE에 중단점이 설정되지 않았습니다.

Question

vuejs를 vscode를 사용하여 디버깅하려고 합니다. 많은 튜토리얼/답변을 시도했지만 제대로 작동하지 않습니다.

그래서 여기에 질문을 하기로 했습니다. 아마도 지금 작동하게 하는 적절한 방법이 있을 것입니다.

여기에 인쇄물을 게시할 수 있도록 디버그하려는 프로젝트와 동일한 프로젝트를 만들었습니다.

프로젝트 구조는 다음과 같습니다.

언바운드 중단점은 다음과 같습니다.

Chrome의 소스 탭은 다음과 같습니다.

자세한 Chrome 소스 탭:

vue.config.js:

으아악

launch.json:

으아악

tasks.json:

으아악

package.json:

으아악

업데이트

@A.D님이 키워드를 사용해 보셨는지 물어보셨어요

으아악

결과는 다음과 같습니다. Ps: 저는 제 코드에 디버거 작성을 시작하고 싶지 않습니다...

하지만 디버거 파일이 다음을 가리키는 것을 볼 수 있습니다:

으아악

그러나 구성요소 src는 실제로 위치합니다

으아악

중단점에 경계가 없는 이유는 무엇입니까?

Answer 1

webRoot 매개변수를 변경하고 문서의 내용을 유지하려면 ${workspaceFolder} 뒤에 src를 포함해야 합니다.

으아악

업데이트: 몇 가지 조사 끝에 이 문제를 발견했습니다. 사용중인 버전에 변화가 있습니다. 그들은 컴파일러를 변경하여 디버거의 작동 방식에 영향을 미쳤습니다.

이 버전을 사용할 수 있습니다. "2.6.11" 작동합니다.

참고: 이 변경 사항은 후속 릴리스에 영향을 미칩니다.

Answer 2

vue 버전 2.6.11 이상에서는 webpack에 문제가 있는 것 같습니다

Git 중앙 테마

Reddit 테마

@Tonielton Mota와 논의한 후 package.json 및 package-lock.json에서 속성 이름을 완전히 제거하면 작동한다는 것을 알았습니다.

실행 중인 파일은 다음과 같습니다.

launch.json

으아악

패키지.json

으아악