vue histroy mode tomcat 적용하기 (1번 방법)

vue histroy 모드를 tomcat 에서 그냥 사용 하면 url로 어떤 경로를 바로 접속시 404 에러를 만납니다. 

const router = new VueRouter({
  mode: 'history',
  routes
})

 

vue.config.js

 

module.exports = {
    publicPath: "/authComponent/",
}

아래와 같이 라우팅이 잡혀 있을때.

const routes: Array<RouteConfig> = [
  {
    path: '/authComponent',
    name: 'Home',
    component: Home
  },
  {
    path: '/authComponent/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/authComponent/RedirectPage',
    name: 'redirect',
    component: RedirectPage,
    props: (route) => ({
      code: route.query.code
    })
  }
]

 

그리고  아래와 같이 배포 했을때 

 

 

 

첫번째 페이지는 잘들어가 집니다,

 

하지만  이렇게 주소를 직접 입력 하여 하위 단으로 들어가려고 하면 404 에러를 만나게 됩니다. 

 

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>

 

이렇게 적어 주고 다시 들어 갑니다.