Springboot 프로젝트 와 vue 프로젝트 통합 패키지 의 실현 방식

나의 환경
* JDK 1.8
 * maven 3.6.0
 * 노드 환경
1.왜 전후 단 프로젝트 개발 시 분리,배치 시 합병 이 필요 합 니까?
일부 회사 에 서 는 실시 인원 을 배치 하 는 기술 이 인터넷 회사 의 운영 팀 과 비교 할 수 없고 각종 부정 확 한 환경 때문에 자동 구축,용기 화 배치 등 을 할 수 없다.따라서 이 경우 배치 시 서비스 소프트웨어 수 요 를 최소 화하 고 가방 수 를 최소 화하 도록 한다.이러한 상황 에 대해 여기 서 사용 하 는 것 은 개발 에서 앞 뒤 단 독립 적 으로 개발 하고 포장 할 때 백 엔 드 spring boot 포장 발표 시 전단 의 구축 출력 을 함께 입력 하 며 마지막 으로 spring boot 프로젝트 만 배치 하면 됩 니 다.nginx 서버 를 설치 하지 않 아 도 됩 니 다.
여기 서 저 는 두 가지 방식 이 있 습 니 다.하 나 는 간단 하고 하 나 는 복잡 합 니 다.다음은 간단 한 예 를 보 겠 습 니 다.
1)전단 개발 후 빌 드 가 구축 한 dist 의 파일 을 springboot 의 resources static 에 복사 합 니 다(boot 프로젝트 는 기본적으로 static 이 없 으 며 새로 만들어 야 합 니 다)
작업 절차:전단 vue 프로젝트 사용 명령npm run build 또는 cnpm run build 패키지 로 dist 파일 을 만 들 고 springboot 프로젝트 에서 resources 에서 static 폴 더 를 만 들 고 dist 파일 의 파일 을 static 에 복사 한 다음 application 에서 boot 프로젝트 를 뛰 어 올 립 니 다.이렇게 index.html 에 직접 접근 하면 페이지 에 접근 할 수 있 습 니 다.(api 인터페이스 요청 주 소 는 상황 에 따라 포장 할 때 설정 하거나 생 성 된 dist 파일 에서 config 폴 더 의 index.js 에서 설정 합 니 다)
프로젝트 구 조 는 그림 과 같다.

마우스 로 선택 한 이 몇 가 지 는 dist 파일 에서 복 사 된 전단 의 가방 입 니 다.그리고 우 리 는 boot 프로젝트 를 직접 시작 하면 index.html 로 접근 할 수 있 습 니 다.(ps:위 에서 가장 간단 한 합병 방식 이지 만 프로젝트 급 프로젝트 개발 이 라면 수 동 합병 을 추천 하지 않 습 니 다.전단 코드 를 구축 하여 springboot 의 resource 에 제출 하 는 것 도 추천 하지 않 습 니 다.좋 은 방법 은 앞 뒤 단 이 완전히 독립 적 으로 코드 를 개발 하 는 것 입 니 다.프로젝트 코드 는 서로 영향 을 주지 않 습 니 다.jenkins 와 같은 구축 도 구 를 통 해 springboot 를 구축 할 때 전단 구축 을 촉발 하고 자동화 스 크 립 트 를 작성 하여 전단 webpack 이 구축 한 자원 을 springboot 에 복사 한 다음 에 jar 의 포장 을 진행 합 니 다.마지막 으로 앞 뒤 단 을 완전히 포함 하 는 springboot 프로젝트 를 얻 었 습 니 다.그러나 상술 한 방법 은 조작 이 간단 하고 사용 하기 편리 하 며 한꺼번에 포장 하여 완성 하려 면 두 번 째 를 보십시오)
2:두 번 째 방법 은 src/main 에서 webapp 폴 더 를 만 든 다음 전단 항목 의 원본 파일 을 이 폴 더 에 복사 하 는 것 입 니 다.구체 적 인 구 조 는 그림 과 같 습 니 다.

그리고 Maven 명령 을 사용 하여 로 컬 node 패키지 명령 을 실행 하면 mvn clean package 명령 을 실행 할 때 Maven 플러그 인 을 이용 하여 cnpm run build 명령 을 실행 할 수 있 습 니 다.
실현 방법 은 이 렇 습 니 다.우 리 는org.codehaus.mojo플러그 인 을 도입 하여 maven 호출 node 명령 을 진행 하려 고 합 니 다.pom.xml 에서:

<plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <executions>
          <execution>
            <id>exec-cnpm-install</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>${cnpm}</executable>
              <arguments>
                <argument>install</argument>
              </arguments>
              <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
            </configuration>
          </execution>
          <execution>
            <id>exec-cnpm-run-build</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>${cnpm}</executable>
              <arguments>
                <argument>run</argument>
                <argument>build</argument>
              </arguments>
              <workingDirectory>${basedir}/src/main/webapp</workingDirectory>
            </configuration>
          </execution>
        </executions>
      </plugin>

그리고maven-resources-plugin플러그 인 은 프로젝트 의 전단 파일 을 boot 프로젝트 의 classes 에 포장 합 니 다.구체 적 인 것 은 pom.xml 의 것 을 참고 하 십시오.
 웹 app/dist 폴 더 의 파일 을src/main/resources/static에 복사 하고 classes 에 포장 합 니 다.

<!--copy         -->
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <configuration>
          <encoding>${project.build.sourceEncoding}</encoding>
        </configuration>
        <executions>
          <execution>
            <id>copy-spring-boot-webapp</id>
            <!-- here the phase you need -->
            <phase>validate</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <encoding>utf-8</encoding>
              <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
              <resources>
                <resource>
                  <directory>${basedir}/src/main/webapp/dist</directory>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>

그리고 Maven 명령 을 통 해:mvn clean package -P window　포장 에 성공 한 후,우리 의 전단 항목 은 전체 boot 프로젝트 의 jar 패키지 에 포장 되 어 있 으 며,프로젝트 를 시작 하고 index.html 페이지 를 방문 하면 프로젝트 가 시작 되 는 것 을 볼 수 있 습 니 다.
걸 어 낸 jar 가방 에서 static 설명 포장 이 여러 가지 이유 로 실 패 했 을 때 저 는 몇 번 만 났 습 니 다.이 럴 때 뮤 직 비디오 clean package-P window 를 다시 한 번 해 야 합 니 다.
ps:아래 Sprint Boot 통합 vue 업로드 다운로드
Springboot 에서 파일 업로드 와 다운 로드 를 실현 하 는 핵심 코드 를 기록 합 니 다.

package com.file.demo.springbootfile;
import com.file.util.ResultUtil;
import org.apache.commons.lang.exception.ExceptionUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.apache.tomcat.util.http.fileupload.util.Streams;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
/*
* springboot  vue，      
* */
//     @Controller, @RestController
@RestController
@RequestMapping("/file")
public class FileController {
  private static final Logger logger = LoggerFactory.getLogger(FileController.class);
  //    ，  /  \  ，    File.separator
  private final static String fileDir="files";
  private final static String rootPath = System.getProperty("user.home")+ File.separator+fileDir+File.separator;
  /*
  *     
  * */
  @RequestMapping("/upload")
  public Object uploadFile(@RequestParam("file")MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){
    File fileDir = new File(rootPath);
    /*
    * exists()：                 
    * isDirectory()：            
    * isFile()：       ，        
    * */
    if(!fileDir.exists() && !fileDir.isDirectory()){
      //           
      fileDir.mkdir();//    ，  
      fileDir.mkdirs();//    
    }
    try{
      if(multipartFiles != null && multipartFiles.length > 0){
        for ( int i = 0;i<multipartFiles.length;i++){
          try{
            String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
            logger.info("     ：" + multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+","
                +multipartFiles[i].getOriginalFilename() + ",      ：" + storagePath);
            Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
          }catch (IOException e){
            logger.info(ExceptionUtils.getFullStackTrace(e));
          }
        }
      }
    }catch (Exception e){
      return ResultUtil.error(e.getMessage());
    }
    return ResultUtil.success("    ！");
  }
  /*
  *     
  * */
  @RequestMapping("/download")
  public Object downkiadFile(@RequestParam String fileName,final HttpServletResponse response,final HttpServletRequest request){
    OutputStream os = null;
    InputStream is = null;
    try{
      //     rootPath
      os = response.getOutputStream();
      //     
      response.reset();
      response.setContentType("application/x-download;charset=GBK");
      response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1"));
      //   
      File f= new File(rootPath+fileName);
      is = new FileInputStream(f);
      if(is == null){
        logger.error("      ，     “"+ fileName +"”    ");
        return ResultUtil.error("      ，     “" + fileName + "”    ");
      }
      //    
      IOUtils.copy(is,response.getOutputStream());
      //    
      response.getOutputStream().flush();
    }catch (IOException e){
      return ResultUtil.error("      ,error:" + e.getMessage());
    }
    //      finally   
    finally {
      {
        try {
          if(is != null){
            is.close();
          }
        }catch (IOException e){
          logger.error(ExceptionUtils.getFullStackTrace(e));
        }
        try{
          if(os != null){
            os.close();
          }
        }catch (IOException e){
          logger.info(ExceptionUtils.getFullStackTrace(e));
        }
      }
    }
    return null;
  }
}

원본 다운로드 주소:https://github.com/struggle0903/SpringBootfiledemo.git
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Springboot 프로젝트 와 vue 프로젝트 를 통합 하여 포장 하 는 실현 방식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!