vue 배포 후 route 인식 안되는 경우

나는 하나의 인스턴스안에 node express로 api 서버를 돌리면서 동시에 서버역할도 하도록 하였다. 

vue 프로젝트를 build하고 그 build된 폴더를 인스턴스로 옮긴 뒤 서버에서 그 걸 바라보도록 

express.static('dist') 이렇게 설정해주었다.

 

그리고 나서 실행을 시켜본 결과, 내가 설정한 라우터대로 잘 이동을 하였지만,

reload되는 구간이라던지, 아니면 내가 직접 라우트를 치고 들어간 경우에는 vue가 인식을 못하였다.

 

생각해보니 vue는 자체 서버로 돌리는 것이 아닌 현재 js 파일로 모두 변환되었기 때문에 왠진 모르겠지만 그렇게 될 수 있다는 생각이 들었다.

 

따라서 구글링을 해본 결과

connect-history-api-fallback이 모듈을 사용하면 된다고 한다.

react도 마찬가지, vue는 하나의 페이지 안에서 이루어지기 때문에 이 모듈이 필수라고 한다.

 

이 모듈을 설치해 준 뒤

npm i connect-history-api-fallback

 

node에 app.use(require('connect-history-api-fallback')()); 이걸 적어주자. 근데 그 위치가

express.static('dist')이거 보다 앞에 있어야 한다고 한다.

 

근데 ... 이상한 점이 뭔가 앞에다 두었을 때 안되어서 뒤로 둔 경우 잘 되었지만,

다시 실행시켰을 때 안되어서 앞으로 두니까 잘되었다....

 

아마 뷰 서버 따로 배포, 노드서버 따로 배포 하면 이런 문제가 발생하지 않을 것 같다??

 

아무튼 저 모듈덕분에 살았다.. 휴