스프링 부트 프로젝트와 뷰 연결하기

부트 설정하고 생성

 

1.sts 새로운 프로젝트 생성

예 )backend폴더임

 

2.루트에서 폴더 하나 생성

예 )frontend폴더임

 

3. frontend 폴더에서 우클릭 show in -> terminal

sts 에서해도 되고 vscode 에서 해도 되고 ! 

여기까지는 빈껍데기인데 여기서 터미널 명령어로 

=============================================

cmd 

vue init webpack > 

 

project name  = vue-front

discription = vue-fronted

-----------------

run +compile  o

-----------------

router y/n = y

ESlint y/n = y

-----------------

ESlint preset

standard  o

-----------------

set up ~ test ? no

test ~~~~~ ? no

npm / yarn ? = npm

=============================================

이후 스프링 부트 폴더안에 프론트엔드 페이지 형성됨 

폴더 우클릭후 refresh 한번 해주고

(위의 과정 다 끝나고 나면 새로고침한다.)

=============================================

 

 

 

frontend > config> index.js 에들어가서 

 

주로 서버 포트와 동일하게 맞춘다.

port 설정도 가능 

 

build 부분 path 경로를 설정한다.

=============================================

 

이후 cmd 에서 

frontend > app 에 위치한 상태로 npm run build

하게되면 원래 static 이 비어있었는데 뷰 파일이 빌드되어 형성됨

 

만약 빌드 명령어가 없다 라는 이상한소리를 한다면

package.json에서 

"scripts":

{

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "lint": "eslint --ext .js,.vue src",

    "build": "node build/build.js"

 }   

이부분 확인하면됨 설정도가능.

다 잘되있는데 가끔 오류나서 안될수 있음 그럼 refresh 눌러주고 다시 하면됨

그래도 안된다 그럼 그냥 아무거나적고 리프레쉬 그리고 다시 지우고 리프레쉬 해보기

=============================================

 

 참고) 스프링 부트에서 포트 변경 했다면~   예) server.port=3000
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 3000, //  이부분 포트 변경한다.
    autoOpenBrowser: false,

 

=======================================================================