如何整合打包Springboot與vue項目

這期內容當中小編將會給大家帶來有關如何整合打包Springboot與vue項目，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

環境

* JDK 1.8
 * maven 3.6.0
 * node環境

1.為什么需要前后端項目開發時分離，部署時合并？

在一些公司，部署實施人員的技術無法和互聯網公司的運維團隊相比，由于各種不定的環境也無法做到自動構建，容器化部署等。因此在這種情況下盡量減少部署時的服務軟件需求，打出的包數量也盡量少。針對這種情況這里采用的在開發中做到前后端獨立開發，打包時在后端springboot打包發布時將前端的構建輸出一起打入，最后只需部署springboot的項目即可，無需再安裝nginx服務器

在這里我有兩種方式，一種是簡單的，一種是復雜的，下邊先來看一個簡單的例子：

1）前端開發好后將build構建好的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的resouce下，好的方式應該是保持前后端完全獨立開發代碼，項目代碼互不影響，借助jenkins這樣的構建工具在構建springboot時觸發前端構建并編寫自動化腳本將前端webpack構建好的資源拷貝到springboot下再進行jar的打包，最后就得到了一個完全包含前后端的springboot項目了。不過上述方法操作簡單，便于使用，如果想一次性打包完成的話，就看第二種）

2：第二種方法是在src/main下建立一個webapp文件夾，然后將前端項目的源文件復制到該文件夾下，具體結構如圖：

然后使用maven命令執行本地node打包命令,這樣就可以 在執行mvn clean package命令時，利用maven插件執行cnpm run build命令(我是使用的淘寶的鏡像cnpm,國外的npm命令會相對慢一些，大家根據自己的條件選擇，具體命令請看項目中前端vue文件的README.md)，一次性完成整個過程

實現方法是這樣的，我們要引入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中的，

 將webapp/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說明打包由于種種原因失敗了，我就遇到過幾次，這時候需要再來一次 mvn clean package -P window

ps：下面看下SprintBoot 整合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;
  }
}

上述就是小編為大家分享的如何整合打包Springboot與vue項目了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。