vue는 SPA(Single Page Application)를 기준으로 작성되는 프레임워크다.
라우터기능을 통해 링크의 주소는 바뀌지만 실제로 페이지가 바뀌는게 아닌 것 이다.
그러므로 직접적으로 주소를 쳐서 접근하거나 새로고침 등을 하게되면 페이지를 인식하지 못하게되며(404, not found) 빈페이지가 뜨는 오류가 발생하게 된다.
즉 라우터로 경로를 이동후 새로고침하면 404 error가 발생하였다.
결론부터 말하면 처리방법은 404 error가 발생시 싱글페이지인(index.html)으로 페이지를 return해주면 된다.
공식문서를 보면 웹서버단 에서 설정을 주라고 가이드가 나와있다.
https://router.vuejs.org/guide/essentials/history-mode.html#apache
Different History modes | Vue Router
Different History modes The history option when creating the router instance allows us to choose among different history modes. Hash Mode The hash history mode is created with createWebHashHistory(): import { createRouter, createWebHashHistory } from 'vue-
router.vuejs.org
나의 경우 해당 소스를 WAS에다가 배포하여 WEB-INFO의 web.xml을 수정하였다.
error code 404가 발생시 npm run build를 한 index.html파일을 바라보게 설정을 하면 증상은 해결되었다.
WEB-INF 폴더를 만들어 줍니다.
그리고 web.xml 을 만들어 줍니다
<?xml version="1.0" encoding="UTF-8"?>
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>https://idlecomputer.tistory.com/350
vue histroy mode tomcat 적용하기 (1번 방법)
vue histroy 모드를 tomcat 에서 그냥 사용 하면 url로 어떤 경로를 바로 접속시 404 에러를 만납니다. const router = new VueRouter({ mode: 'history', routes }) vue.config.js module.exports = { publicPath: "/authComponent/", } 아래
idlecomputer.tistory.com
https://idlecomputer.tistory.com/351
vue histroy mode tomcat 적용하기 (2번 방법)
해당 방법은 1번 보다 vue 공식 문서에 좀 더 가까운 방법 입니다. 저의 publicPath 은 아래와 같습니다. 톰캣과 맞췄습니다. 아래는 현재 router 셋팅 입니다., import Vue from 'vue' import VueRouter, { RouteConfig
idlecomputer.tistory.com
