Vue Devtools 로컬 file 경로에서 사용하는 방법

Vue Devtools 로컬 file 경로에서 사용하는 방법

 

로컬 file:// 경로에서 Vue.js 개발을 진행할 때, Vue Devtools를 설치했지만,

Download the Vue Devtools extension for a better development experience 와 Vue.js not detected 가 뜨면서 Vue Devtools 가 제대로 실행되지 않을 때 해결하는 방법을 알려드리도록 하겠습니다.

 

위와같이 Vue Devtools를 설치하고 Vue.js 를 사용하고 있지만,

설치한 Vue Devtools Extension은 Vue.js not detected 라고 하고,

Console에는 Download the Vue Devtools extension for a better development experience 라고 이미 설치한 Vue Devtools를 설치하라고 합니다.

해결 방법은 아주 간단합니다.

 

Vue.js Devtools Extension 확장 프로그램 관리로 갑니다.

 

Vue.js devtools 확장 프로그램 관리에서,

파일 URL에 대한 액세스 허용을 활성화 시켜줍니다.

 

다시 돌아와서 파일을 새롭게 열어보면 Vue.js Devtools Extension 아이콘이 Vue.js 를 감지하고 색이 활성화 된것을 확인하실 수 있습니다.

Console에 뜨던 "Download the Vue Devtools extension for a better development experience" 도 사라진 것을 확인하실 수 있습니다.

 

Vue.js Devtools가 잘 작동하는 것도 확인하실 수 있습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.