Vue Spring Gather

Vue에서 빌드한 페이지를 Spring에서 사용하는 방법

1. Vue-router 설정
   • Hash 방식이 아닌 History 방식 사용
   • vue.config.js의 publicPath 사용하지 말기
2. Vue 404 페이지 설정
   • 404 페이지를 만들고 router 목록과 매칭되지 않는 URL은 404 페이지로 리다이렉션
   • path: "/:pathMatch(.*)*를 사용
3. vue.config.js의 outputDir을 다음과 같이 설정하고 빌드
   • ${SPRING_LOCATION}/src/main/resources/static
4. Spring에 다음 controller 추가

@Controller
public class WebErrorController implements ErrorController {

    @GetMapping("/error")
    public String redirectRoot(){
        return "index.html";
    }

}

설명

• Vue는 Single Page Application
• Vue-router를 사용하더라도 실제로 빌드된 페이지는 index.html 하나
• Vue-router를 통해 설정한 하위 URL들은 모두 index.html을 보내주면 됨
• ErrorController를 통해 index.html을 반환하도록 설정해서 문제를 해결

References

1. https://jiurinie.tistory.com/105