[Vue.js] SpringBoot + Vue.js 404페이지 해결

문제발생

HTML5 히스토리 모드

vue-router 의 기본 모드는 hash mode 로, URL 해시를 사용하여 전체 URL 을 시뮬레이트 하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다...!?

# 해시를 제거하기 위해 라우터의 history 모드를 사용할 수 있다.

SPA(Single Page Application)

특성상 vue는 index.html 파일 하나로 관리한다.

기본적으로 URL 을 입력하면 서버접속을 먼저 시도하기때문에
서버설정이 없는 클라이언트 앱이라 사용자가 직접 URL 에 접속하면
404 에러가 발생한다.

해결방안

• 서버에 간단하게 포괄적인 대체 경로를 추가하기만 하면된다!
  SPA 앱에 있는 index.html 페이지를 매핑하도록 하면 된다.
  ==> 모든 요청은 서버에서 index.html 을 반환하기 때문에 해당 페이지에 내장된 SPA 라우팅 기능을 이용할 수 있게 된다.
• vue 프로젝트를 빌드하여 SpringBoot 프로젝트의 정적 자원을 관리하는 경로에 빌드된 파일들을 넣어준다.

1. SpringBoot

ErrorHandler 설정

방법 1

• application.properties 설정 시

• Controller 에서 static 없이 /index.html 만 표시 가능

방법 2

• application.properties 설정 안할 시 /static/index.html 명시해야한다.

이렇게하면 404 에러가 발생했을 시 빌드된 SPA 앱 index.html 로 반환 한다.

resources 폴더 구조

2. Vue.js

vue.config.js 설정

module.exports = {
    outputDir: "../src/main/resources/static",
    indexPath: "../static/index.html",
    devServer: {
        overlay: false,
        historyApiFallback: true,
        proxy: {
            '/': {
                target: 'http://localhost:8080/',
                changeOrigin: true,
                secure: false
            }
        }
    },

}

SpringBoot 의 정적 폴더에 빌드 되도록 path 를 잘 지정해야한다.

이렇게 간단하게만 세팅하면 새로고침 또는 URL을 직접 입력해도 서버에서 반환한 index.html 에서 라우팅하여 페이지를 찾아준다.