PWA 질문

[임미선]

 뷰로 코딩 다 하고, 'Progressive Web App & 셋팅' 강의를 보면서 따라했습니다. npm run build랑 vue add pwa 다 해도 dist 폴더 안에 img 폴더가 생기질 않아서 직접 img 폴더를 생성하여 안에 아이콘용 192x192 사이즈의 이미지도 넣어서 github에 호스팅하여 사이트에 들어가봤습니다.

 그런데 매니페스트를 봤더니 밑의 사진과 같은 오류가 뜹니다. 이 오류를 해결하면 pwa로 완성될 것 같은데 어떻게 고쳐야할지 모르겠습니다. 

 

위 사진처럼 'service-worker.js' 파일이 멀쩡하게 생성됐는데 왜 오류가 뜨는지 궁금합니다...

[codingapple]

새로운 프로젝트 하나 만들어서 pwa 설치하고 build 해도 똑같이 그런가요? 

vscode 익스텐션 중에 live server 검색해서 설치하시고

dist 폴더 안의 index.html 우클릭 - live server로 띄우기 눌러서 한번 개발자도구 확인해봅시다 

 

[임미선]

dist 폴더 안의 index.html 우클릭해서 라이브 서버로 띄워봤습니다.

오류가 많이 뜨네요... 오류가 뭘 의미하는지 잘 모르겠습니다

[임미선]

제가 bulid를 해도 dist 안에 img 폴더가 생기질 않아서, 직접 dist 안에 img 폴더를 만들어서 사진 파일을 넣어뒀는데 이 행동이 문제가 되진 않았는지도 궁금합니다.

[codingapple]

폴더만들고 그런건 상관없는데 근본적인 해결책은 아닙니다

저렇게 에러뜨면 안되니 새로 프로젝트 만들어보고 pwa 설치하고 빌드 시도해봅시다 

[글쓴이]

글