spring-boot + vuejs 프로젝트 설정

1. spring-boot 프로젝트 하위의 vuejs폴더에 vue프로젝트가 포함되는 구조로 프로젝트를 구성한다. (동일 레벨로 프로젝트 구성 시, vue소스 편집 중 eslint가 작동되지 않았다)

+ spring-boot
  - vuejs

2. vuejs/vue.config.js 파일을 생성하여 outputDir 설정을 spring 정적리소스(/src/main/resources/static) 폴더로 지정한다. chainWebpack-config 설정은 vue-cli-service build --watch 실행 시, css파일 생성되도록 한다.

const path = require('path');
module.exports = {
  outputDir: '../src/main/resources/static',
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html'      
    }
  }, 
  chainWebpack: config => {
    if (config.plugins.has('extract-css')) {
      const extractCSSPlugin = config.plugin('extract-css');
      extractCSSPlugin &&
        extractCSSPlugin.tap(() => [
          {
            filename: 'build.css',
            chunkFilename: 'build.css'
          }
        ]);
    }    
  },  
}  

3. package.json scripts 세션에 watch설정을 추가한다.

"scripts": {
  "watch": "vue-cli-service build --watch"
}

4. spring-boot로 서버를 기동하고, vuejs는 npm run watch로 실행한다. VueRouter를 history 모드로 사용 한다면 spring에 아래와 같은 @Controller를 추가한다.

@Controller
public class VueController {

  @RequestMapping(value = "{path:[^\\\\.]*}", method=RequestMethod.GET)
  public String goHome() {
    return "forward:/index.html";
  }
}

5. 위와 같이 프로젝트를 구성하여도 .vue파일 수정 시 eslint 오류가 발생하여 코드오류표시가 작동하지 않는다. vuejs폴더를 루트로 별도의 편집기(vscode, IntelliJ, ...)를 실행하면 eslnit가 작동하며, 수정 시 spring-boot에 자동으로 deploy 된다. (해당 편집기는 코드 수정 용도로 별도의 서버기동은 필요하지 않는다)