Vue.js로 웹페이지 리빌드하기 - (9) spring 프로젝트에 이식

기존에 작성했던 프로젝트는 java springboot 로 만들어진 프로젝트로,

mustache라는 스프링부트 내장 템플릿으로 간단히 구현한 프로젝트였습니다.

이번에 Vue.js로 웹페이지를 리빌딩하고, 겉모습을 완성했으므로

이제 만들어 둔 것을 기존 프로젝트에 이식하려고 합니다.

 

방법 자체는 구글링을 하면 많이 나오며,

대부분의 글이 SpringBoot + Vue.js의 초기 프로젝트 세팅인데... 

그냥 그걸 따라해도 되긴 되더군요.

 

 

전제 조건

• 기존 스프링 프로젝트가 있음
• 따로 만들어둔 Vue.js 프로젝트가 있음
• (Vue.js가 있으므로, Node.js도 깔려져있다는 전제)

이러면 이 뒷 단계는 정말 쉽게 이식 할 수 있습니다.

 

1. node_modules를 제외한 나머지 파일을 전부 복사.

 

2. SpringBoot 프로젝트 root 폴더에 vue 폴더 생성

3. 1에서 복사한 파일들을 vue 폴더 내부에 생성

(저는 이미 npm install을 해버려서 node_modules가 존재합니다만 없는게 맞아요.)

 

여기서, node_modules를 복사 안하는 이유는 용량이 크고 파일 숫자가 너무 많기때문입니다.

사실, 복사해도 별 상관은 없습니다만, 전 npm install로 설치해주는 걸 선호해서 그쪽을 골랐습니다.

 

4. vue 폴더 내부의 babel.config를 vue.config로 이름 변경

4-1. 이미 vue.config가 존재한다면 병합. 

4-2. babel.config의 내용이 아래의 내용밖에 없다면 생략해도 됨.

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 

5. vue.config 편집

module.exports = {
  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false
    }
  },
  transpileDependencies: [
    'quasar'
  ],
  
  // 이 위의 코드는 quasar add 시 입력되는 기본코드
  // 이하 코드를 추가합니다.
  
  outputDir: "../src/main/resources/static",
  // build를 한 코드를 넣을 장소
  indexPath: "../static/index.html",
  // 실제로 실행되는 웹페이지의 index
  devServer: {
    port: 9091
    , proxy: "http://localhost:9191"
  }, // 프론트 서버 실행용 설정
  chainWebpack: config=> {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.use("vue-svg-loader").loader("vue-svg-loader")
  } // vue3 cli 로더 설정
}

 

6. npm run build 로 프로젝트 빌드

빌드 후에 outputDir에 설정한 주소에 파일이 담겨져있는지 확인 

 

7. npm run serve 로 프로젝트 실행

 

제대로 실행되는걸 확인 할 수 있습니다.

이제는 api와 연결하는걸 해봐야겠네요...