vue3 vite vue-router reload 404

• vue@3
• vite@4
• vue-router@4

npm run dev에서는 멀쩡하게 잘 동작하던 router가 deploy만 하면 제대로 동작하지 않는 경우에 임시방편

분명히 router > redirect까지 잘 되는데! 새로고침을 하게되면 index.html을 제대로 못띄워서발생하는 문제인듯 (SPA)

vue-router에서는 Apache를 사용하는 경우 httpd.conf 를 수정하라 하는데 tomcat을 사용하고 있어서 임시 방편으로 pulic 폴더에 WEB-INF 폴더를 만들고 web.xml을 아래와 같이 만든다.

/public/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0" metadata-complete="true">
    <display-name>vue-vite project</display-name>
    <description>vue-vite project</description>
    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>
</web-app>

그리고 router는 다음과 같이 설정해준다. 웬만하면 404 페이지는 따로 만들어주자.

/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: 'b',
      component: () => import('@/layouts/AView.vue'),
      children: [
        {
          name: 'b',
          path: 'b',
          component: () => import('@/views/BView.vue'),
        },
      ],
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('@/views/NotFoundView.vue'),
    },
  ],
});

export default router;

그 후 npm run build하고 deploy 시 새로고침을 해도 제대로 동작하는 것을 볼 수 있다. 물론 console에는 404에러가 뜬다..
=> 다른 방법으로 해결

(404 error, when you reload in a project using vue3, vite, and vue-router)