[VueJs] Spring boot, vueJs 연동 및 빌드

• spring boot project와 vue project를 연동시킨 후 spring server를 켜고 vue포트(8080)를 입력해서 들어가면 resources > static > index.html 파일을 로드한다.
• spring server를 통해 index.html 파일이 아닌 나의 vue파일들을 보고싶다면 vue 파일(frontend폴더 내에있는)들의 빌드 path를 잡아주어야 한다.

• vue.config.js에 아래처럼 추가해준다.

const path = require('path') 
module.exports = { 
  outputDir: path.resolve(__dirname, "../"+"main/resources/static"),
    ...
}

• 위와같이 설정한 후 npm run build하면 설정해 놓은 path에 vue를 build한 결과물들이 들어온다.

• gradle.build파일에서 설정을 추가해준다.

plugins {
	...
    id "com.moowork.node" version "1.3.1"
	...
}


node {
        version = '12.13.1'
        npmVersion = '6.12.1'
        workDir= file("./src/frontend")
        npmWorkDir= file("./src/frontend")
        nodeModulesDir= file("./src/frontend")
}


task setUp(type:NpmTask){
    description = "Install Node.js packages"
    args = ['install']
    inputs.files file('package.json')
    outputs.files file('node_modules')
}


task buildFrontEnd(type:NpmTask,dependsOn:setUp){
    description="build vue.js"
    args = ['run', 'build']

    processResources.dependsOn 'buildFrontEnd'
}

• 위와같이 설정하면 spring boot project를 실행할 때 마다

  • gradle build하는 과정중에 npm build과정이 같이 실행되면서 resource -> static 폴더내에 빌드된 vue파일들이 들어간다.

• 참고
  • https://deockstory.tistory.com/26