vue) 로컬에서 빌드한 index.html 라우팅 안되는 현상

로컬에서 빌드해서 index.html이 안열리는 이유는

여러가지가 있는데

내가 겪은 상황은 다음과 같다.

 

1.빌드한 파일인 index.html을 더블클릭해서 여는 경우는 

파일탐색기로 여는 경우이기 때문에 

상대경로가 파일탐색기가 있는 위치가 기준으로 잡힌다. 

 

 

 

 

 

2. 요걸 해결하려면 vue router 설정을 해줘야한다.

 

라우팅 할 때

크게 두가지 방법이 있다. 

-> hash (url 이동방법이 아님)

-> history (url 이동 방법임)

 

hash모드로 바꿔줘야지

 

라우팅에 따라 화면 전환을 할 수 있다.

 

3. router를 hash모드로

import VueRouter from "vue-router";
import pageRouter from "./modules/pageRouter"

const router = new VueRouter({
    mode:"hash",
    routes: [
        pageRouter
    ]
});

export default router;

 

 

이렇게 설정하면 

로컬에서도 빋드한 index.html을 

확인할 수 있다. 

 

운영에서도 nginx, apache와 같은 web server 환경이 아니라면

hash모드로 배포해야 될 듯 하다.