Vue CLI 3 Configuration

vue cli version : 3.11.0 (installed at 2019. 08. 06)

Installation

$ npm install -g @vue/cli
  ... (installed) ...
$ vue --version
3.11.0

Backend(Spring Framework) Configuration

Project structure

[Spring Project Root]
├── pom.xml
├── src
│   ├── main
│   │   ├── resources
│   │   └── webapp
│   │       ├── WEB-INF
│   │       │   ├── classes
│   │       │   ├── spring
│   │       │   │   ├── appServlet
│   │       │   │   │   └── servlet-context.xml
│   │       │   │   └── root-context.xml
│   │       │   ├── views
│   │       │   │   └── home.jsp
│   │       │   └── web.xml
│   │       └── resources
│   └── test
└── target

Frontend(Vue.js) Configuration in Backend Project

[SpringProjectRoot]/src 경로 밑에 vue 프로젝트를 생성한다. (명령어 : vue create <project-name>)

$ ls
main    test
$ vue create frontend

vue 프로젝트 생성 명령어를 입력하면 아래와 같이 preset을 선택할 수 있다. default(babel, eslint)를 선택할 경우 추가 설정 없이 자동으로 프로젝트가 생성되며, Manually select features를 선택할 경우 사용자가 직접 프로젝트 설정을 선택할 수 있다.

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

Frontend Project Structure

[Spring Project Root]/src/frontend
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
        ├── About.vue
        └── Home.vue

vue.config.js 설정 파일

(공식 Vue Cli Configuration Reference : https://cli.vuejs.org/config/#global-cli-config) webpack 설정을 위해 Frontend 프로젝트의 루트 경로([Spring Project Root]/src/frontend) 밑에 vue.config.js 파일을 생성하고 다음과 같이 작성한다.

/* 상대 주소는 Frontend 루트 경로를 기준으로 한다. */
module.exports = {
  outputDir: '../main/webapp/resources',
  assetsDir: '../resources/static'
  /* 주의! : assetsDir을 'static'으로 설정하면 index.html에서 정적 파일들에 접근을 못한다. */
}

outputDir : 빌드 결과로 생성되는 파일들의 기본 경로
assetsDir : outputDir 기준의 상대 경로. 정적 파일(js, css, fonts, img) 생성 경로
indexPath : outputDir 기준의 상대 경로. 지정하지 않으면 디폴트 값인 index.html이 설정된다.

위의 설정에 따라 빌드하면 다음과 같은 경로로 파일이 생성된다.

[Spring Project Root]/src/main/webapp/resources
├── favicon.ico
├── index.html
└── static
    ├── css
    │   └── app.3c0b035c.css
    ├── img
    │   └── logo.82b9c7a5.png
    └── js
        ├── about.df00c587.js
        ├── about.df00c587.js.map
        ├── app.0fa21d74.js
        ├── app.0fa21d74.js.map
        ├── chunk-vendors.099df166.js
        └── chunk-vendors.099df166.js.map

Spring 설정

Spring이 vue.config.js에서 설정한 경로에서 view 파일을 찾도록 servlet-context.xml 파일을 수정한다.

...
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="prefix" value="/resources/" />
    <beans:property name="suffix" value=".html" />
</beans:bean>
...

HomeController.java를 수정하여 URL /을 home.jsp가 아닌 index.html로 매핑시킨다.

@Controller
public class HomeController {
    ....
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
        ....
        return "index";
    }
}

최종 프로젝트 구조

[Spring Project Root]
├── pom.xml
├── src
│   ├── frontend
│   │   ├── README.md
│   │   ├── babel.config.js
│   │   ├── node_modules
│   │   ├── package-lock.json
│   │   ├── package.json
│   │   ├── postcss.config.js
│   │   ├── public
│   │   │   ├── favicon.ico
│   │   │   └── index.html
│   │   ├── src
│   │   │   ├── App.vue
│   │   │   ├── assets
│   │   │   │   └── logo.png
│   │   │   ├── components
│   │   │   │   └── HelloWorld.vue
│   │   │   ├── main.js
│   │   │   ├── router.js
│   │   │   ├── store.js
│   │   │   └── views
│   │   │       ├── About.vue
│   │   │       └── Home.vue
│   │   └── vue.config.js
│   ├── main
│   │   ├── resources
│   │   └── webapp
│   │       ├── WEB-INF
│   │       │   ├── classes
│   │       │   ├── spring
│   │       │   │   ├── appServlet
│   │       │   │   │   └── servlet-context.xml
│   │       │   │   └── root-context.xml
│   │       │   ├── views
│   │       │   │   └── home.jsp
│   │       │   └── web.xml
│   │       └── resources
│   │           ├── favicon.ico
│   │           ├── index.html
│   │           └── static
│   │               ├── css
│   │               │   └── app.3c0b035c.css
│   │               ├── img
│   │               │   └── logo.82b9c7a5.png
│   │               └── js
│   │                   ├── about.df00c587.js
│   │                   ├── about.df00c587.js.map
│   │                   ├── app.0fa21d74.js
│   │                   ├── app.0fa21d74.js.map
│   │                   ├── chunk-vendors.099df166.js
│   │                   └── chunk-vendors.099df166.js.map
│   └── test
└── target

topgaren / DevStudy