tools & libs/IDES
[vscode] Spring Boot + Vue 연동 프로젝트 생성 3 - 스프링과의 연동
- -
드디어 스프링 부트와 Vue 앱을 연동해보자.
1. build
먼저 yarn build 명령을 이용해서 vue 앱의 배포 버전을 생성한다.
dist 경로에 index.html 파일도 생성되는데 이 파일에서 다른 js, css 들을 링크해서 사용중이다.
주의할 점은 이 경로들이 절대경로라는 점이다.
모든 경로를 상대경로로 바꿔주자.
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=./favicon.ico> <title>vue-frontend</title>
<link href=./css/app.6af8ca07.css rel=preload as=style>
<link href=./js/app.a6ccf608.js rel=preload as=script>
<link href=./js/chunk-vendors.704f239b.js rel=preload as=script>
<link href=./css/app.6af8ca07.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=./js/chunk-vendors.704f239b.js> </script> <script src=./js/app.a6ccf608.js> </script> </body> </html>
2. 스프링 부트에 파일 배포
src/main/webapp/WEB-INF/에 Vue의 dist를 이동시키고 vue-dist로 rename 해준다.(다른 dist가 있을 것을 대비해서)
또한 index.html 파일도 vue.html로 변경한다.
3. 스프링 부트에서 정적 리소스를 연결한다.
@SpringBootApplication
public class DemoApplication implements WebMvcConfigurer{
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
System.out.println("resource 등록");
registry.addResourceHandler("/vue/**").addResourceLocations("/WEB-INF/resource/vue-dist");
}
}
4. jsp에서 vue 페이지를 호출해보고 동작을 확인한다.
<%@ page contentType="text/html;charset=utf-8"%>
<html>
<body>
${message}<br>
<a href="/vue/vue.html">vue page</a>
</body>
</html>
위와 같은 상황에서 url의 # 이 거슬린다면 router의 mode를 history로 변경할 수 있다. 이경우
와 같이 일반적인 경로가 표시된다. vue/vue.html# 부분이 삭제된다.
하지만 처음 기본 페이지인 / 에서 router가 연결되지 못하는 문제가 발생했다.
/ 인 상태에서 표시할 내용을 별도로 구성하는 것이 좋을것 같다.
'tools & libs > IDES' 카테고리의 다른 글
| [vscode] ConfigError:'class name' is not a valid class name (0) | 2019.11.26 |
|---|---|
| [vscode] Spring Boot + Vue 연동 프로젝트 생성 4 - 배포 (0) | 2019.11.21 |
| [vscode] Spring Boot + Vue 연동 프로젝트 생성 2 - 뷰 앱 (0) | 2019.11.21 |
| [vscode] Spring Boot + Vue 연동 프로젝트 생성 1 - 부트 앱 개발 (0) | 2019.11.21 |
| [vscode] Git 사용법 1 (0) | 2019.11.20 |
Contents
소중한 공감 감사합니다