vue+Springboot 전후 단 분리 프로젝트 를 배치 하 는 절차 구현

단일 페이지 응용
vue 는 단일 페이지 응용 프로그램(SinglePage Web Application,SPA)을 개발 하 는 데 자주 사 용 됩 니 다.단일 페이지 응용 이 라 고 하 는 것 이 무엇 입 니까?즉,한 장의 웹 페이지 응용 만 있 습 니 다.단일 페이지 응용 프로그램의 전환 은 국부 자원 을 갱신 하기 만 하면 우리 페이지 의 응답 속 도 를 크게 가속 화 시 킵 니 다.
전단 페이지 패키지
vue 프로젝트 를 열 고 프로젝트 루트 디 렉 터 리 에 설정 파일 을 만 듭 니 다vue.config.js그리고 다음 내용 을 기록 합 니 다.

module.exports = {
  assetsDir: 'static', //         
  outputDir: 'dist', //          
  lintOnSave: false,
  productionSourceMap: false, //       
  runtimeCompiler: true, //     
  chainWebpack: () => { }
  },
  devServer: { // vue      
    open: true,
    proxy: { //     ，           
      '/api': {
        target: 'http://www.ccocc.co',
        changeOrigin: true, //     
        ws: true,
        pathRewrite: {
          '^/api': '' //     
        }
      }
    }
  }
}

그리고 콘 솔 에 명령 을 입력 하 십시오npm run build웹 팩 이 vue 프로젝트 를 포장 해 주 기 를 기다 리 고 있 습 니 다.

포장 이 완료 되면 루트 디 렉 터 리 에서 우리 가 지정 한 폴 더 를 생 성 합 니 다:dist

폴 더 를 엽 니 다.디 렉 터 리 는 다음 과 같 습 니 다.
css 는 우리 가 쓴 css 코드 를 저장 합 니 다.js 는 우리 가 쓴 js 코드 를 저장 합 니 다.전체 공정 은 index.html 페이지 로 농축 되 어 있 습 니 다.한 페이지 가 무엇 입 니까?이것 이 바로 한 페이지 입 니 다.

전단 페이지 배치
포 장 된 dist 폴 더 를 서버 에 업로드 하고 위 치 를 마음대로 선택 하 십시오:

그리고 nginx 프로필 을 열 고 다음 설정 을 기록 합 니 다.

server {
    listen  80; # nginx     
    server_name www.ccocc.co; #     
		
		#      logo
    location = /favicon.ico{ 
    log_not_found off;
    access_log off;

}
		#        ，     /api             
    location /api{
    proxy_pass http://127.0.0.1:9786; #            
}
		#   nginx      
    location /{
    root /root/zcj/data/dist; # dist       ，              root， root          /root
    index index.html index.htm; #     ，  
    try_files $uri $uri/ /index.html; #    
} 

}

백 엔 드 프로젝트 배치
위 에서 우 리 는 모두 프로필 을 다 썼 기 때문에 우 리 는 직접 프로젝트 를 포장 하고 서버 에 업로드 해서 시작 하면 된다.
명령 행 에 명령 을 입력 하 십시오:
배경 에서 springboot 프로젝트 를 실행 하고 지정 한 로그 파일 로 로 그 를 출력 합 니 다.

nohup java -jar fatNerdTimeTrack.jar >myfatLog.log 2>&1 &

그리고 클 라 우 드 서버 콘 솔 에 가서 백 엔 드 포트 의 보안 팀 을 엽 니 다.

여기까지.우리 의 전체 앞 뒤 가 분 리 된 프로젝트 는 성공 적 으로 배치 되 었 다.
vue+Springboot 전후 단 분리 프로젝트 를 배치 하 는 절차 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue+Springboot 전후 단 분리 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!