Vue.js와 Spring Boot 연결

프로젝트를 설치할 곳에 경로를 설정

터미널에서 vue cli설치

 npm install –g @vue/cli

vue프로젝트 생성

vue create front

cd front

npm run serve로 실행

npm run serve

package.json파일에서 포트번호를 설정

"scripts": {
    "serve": "vue-cli-service serve --port 8082",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

또는 vue.config.js파일에서 포트번호 변경

module.exports = {
  server: {
    port: 8082,
  },
};

프록시 서버를 이용하여 spring boot와 vue를 연결

연결하지 않으면 페이지 변경시마다 빌드를 해야 함

module.exports = {
  outputDir: "../src/main/resources/static",
  devServer: {
    proxy: {
      '/test': {
        // '/test' 가 붙으면 target의 포트번호에서 열림 
        target: 'http://localhost:8081', // 스프링부트의 포트번호
        changeOrigin: true
      }
    }
  }
};

이후 Spring boot를 실행하여 Vue 페이지가 열리는지 확인