[Vue.js/미해결] 배포 후 흰 화면으로 뜨는 현상 / Uncaught SyntaxError: Unexpected token '<'

 

에러

Uncaught SyntaxError: Unexpected token '<'

 

원인

구글링해보니 React나 Vue같은 SPA 프로젝트를 배포할 때 많이 생기는 현상인 듯 하다.

npm run build 명령어 실행 후 프로젝트를 배포가능한 형태로 만들었을 때 html 파일을 js 파일로 인식하여 생기는 문제이다.

로컬에서, 그리고 serve 패키지를 사용하여 웹서버로 실행했을 때는 아무런 에러없이 잘 빌드된 것을 확인했지만

문제는 GCP에 배포했을 때 해당 오류로 인해 페이지 랜딩부터 되지 않았다는 것이다.

 

일주일 내내 시도해본 방법은

1) output 경로를 기본경로인 dist가 아닌 새로 폴더를 만들어 다시 설정한다.

2) <base> 태그에 기본 베이스 경로를 넣어준다.

3) package.json에 이것저것요것 다 설정한다.

4) 이 포스팅에 있는 방법 다 시도

Error 정리: React-Uncaught SyntaxError: Unexpected token <

5) 이 포스팅에 있는 방법 다 시도

lab.naminsik

6) cli3이 문제라는 의견도 있었다. 계속 고민하다가 그냥 cli3으로 프로젝트를 만들었는데 이게 발목을 잡았던 것일까?

 

 

 

---

 

 

이 문제 때문에 일주일 내내 씨름하다가 결국 내려놓았다. (ㅠㅠ)

이렇게 작은 프로젝트임에도 배포가 안돼서 하루종일 서버 내렸다 올렸다 난리를 피우며 좀 우울하기도 했지만..

부족함을 더 많이 느꼈기때문에 공부할 것이 명확해져서 속시원한 점도 있다.

 

2022년 상반기 안에 백엔드를 공부해서 배포에 성공할 것이다. (제발)

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.