如何整合打包Springboot與vue項(xiàng)目
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何整合打包Springboot與vue項(xiàng)目，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)主營(yíng)蕉嶺網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開(kāi)發(fā),蕉嶺h5重慶小程序開(kāi)發(fā)搭建,蕉嶺網(wǎng)站營(yíng)銷(xiāo)推廣歡迎蕉嶺等地區(qū)企業(yè)咨詢(xún)
環(huán)境
* JDK 1.8
* maven 3.6.0
* node環(huán)境
1.為什么需要前后端項(xiàng)目開(kāi)發(fā)時(shí)分離，部署時(shí)合并？
在一些公司，部署實(shí)施人員的技術(shù)無(wú)法和互聯(lián)網(wǎng)公司的運(yùn)維團(tuán)隊(duì)相比，由于各種不定的環(huán)境也無(wú)法做到自動(dòng)構(gòu)建，容器化部署等。因此在這種情況下盡量減少部署時(shí)的服務(wù)軟件需求，打出的包數(shù)量也盡量少。針對(duì)這種情況這里采用的在開(kāi)發(fā)中做到前后端獨(dú)立開(kāi)發(fā)，打包時(shí)在后端springboot打包發(fā)布時(shí)將前端的構(gòu)建輸出一起打入，最后只需部署springboot的項(xiàng)目即可，無(wú)需再安裝nginx服務(wù)器
在這里我有兩種方式，一種是簡(jiǎn)單的，一種是復(fù)雜的，下邊先來(lái)看一個(gè)簡(jiǎn)單的例子：
1）前端開(kāi)發(fā)好后將build構(gòu)建好的dist下的文件拷貝到springboot的resources的static下（boot項(xiàng)目默認(rèn)沒(méi)有static，需要自己新建）
操作步驟：前端vue項(xiàng)目使用命令 npm run build 或者 cnpm run build 打包生成dist文件，在springboot項(xiàng)目中resources下建立static文件夾，將dist文件中的文件復(fù)制到static中，然后去application中跑起來(lái)boot項(xiàng)目，這樣直接訪問(wèn)index.html就可以訪問(wèn)到頁(yè)面（api接口請(qǐng)求地址自己根據(jù)情況打包時(shí)配置或者在生成的dist文件中config文件夾中的index.js中配置）
項(xiàng)目結(jié)構(gòu)如圖：
鼠標(biāo)選中的這幾個(gè)就是從dist文件中復(fù)制過(guò)來(lái)的前端的包，然后我們直接啟動(dòng)boot項(xiàng)目就可以通過(guò)index.html訪問(wèn)了（ps：上面這是最簡(jiǎn)單的合并方式，但是如果作為工程級(jí)的項(xiàng)目開(kāi)發(fā)，并不推薦使用手工合并，也不推薦將前端代碼構(gòu)建后提交到springboot的resouce下，好的方式應(yīng)該是保持前后端完全獨(dú)立開(kāi)發(fā)代碼，項(xiàng)目代碼互不影響，借助jenkins這樣的構(gòu)建工具在構(gòu)建springboot時(shí)觸發(fā)前端構(gòu)建并編寫(xiě)自動(dòng)化腳本將前端webpack構(gòu)建好的資源拷貝到springboot下再進(jìn)行jar的打包，最后就得到了一個(gè)完全包含前后端的springboot項(xiàng)目了。不過(guò)上述方法操作簡(jiǎn)單，便于使用，如果想一次性打包完成的話(huà)，就看第二種）
2：第二種方法是在src/main下建立一個(gè)webapp文件夾，然后將前端項(xiàng)目的源文件復(fù)制到該文件夾下，具體結(jié)構(gòu)如圖：
然后使用maven命令執(zhí)行本地node打包命令,這樣就可以 在執(zhí)行mvn clean package命令時(shí)，利用maven插件執(zhí)行cnpm run build命令(我是使用的淘寶的鏡像cnpm,國(guó)外的npm命令會(huì)相對(duì)慢一些，大家根據(jù)自己的條件選擇，具體命令請(qǐng)看項(xiàng)目中前端vue文件的README.md)，一次性完成整個(gè)過(guò)程
實(shí)現(xiàn)方法是這樣的，我們要引入org.codehaus.mojo插件來(lái)進(jìn)行maven調(diào)用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插件將項(xiàng)目的前端文件打包到boot項(xiàng)目的classes中，具體的請(qǐng)參考pom.xml中的，
將webapp/dist文件夾中的文件復(fù)制到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>然后通過(guò)maven命令：
mvn clean package -P window
打包成功后我們的前端項(xiàng)目就整個(gè)的打包到了boot項(xiàng)目的jar包中，然后啟動(dòng)項(xiàng)目，訪問(wèn)index.html頁(yè)面就看到了項(xiàng)目啟動(dòng)成功。
打出來(lái)的jar包中如果static說(shuō)明打包由于種種原因失敗了，我就遇到過(guò)幾次，這時(shí)候需要再來(lái)一次 mvn clean package -P window
ps：下面看下SprintBoot 整合vue實(shí)現(xiàn)上傳下載
這里記錄一下在Springboot中實(shí)現(xiàn)文件上傳下載的核心代碼
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);
//在文件中，不用/或者\(yùn)最好，推薦使用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()：測(cè)試此抽象路徑名表示的文件是否存在
* isDirectory()：檢查一個(gè)對(duì)象是否是文件夾
* isFile()：判斷是否為文件，也可能是文件目錄
* */
if(!fileDir.exists() && !fileDir.isDirectory()){
//檢查到文件不存在則創(chuàng)建
fileDir.mkdir();//創(chuàng)建文件，一級(jí)
fileDir.mkdirs();//創(chuàng)建多級(jí)
}
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("下載文件失敗，請(qǐng)檢查文件“"+ fileName +"”是否存在");
return ResultUtil.error("下載附件失敗，請(qǐng)檢查文件“" + fileName + "”是否存在");
}
//復(fù)制文件
IOUtils.copy(is,response.getOutputStream());
//刷新緩沖
response.getOutputStream().flush();
}catch (IOException e){
return ResultUtil.error("下載文件失敗,error:" + e.getMessage());
}
//文件的關(guān)閉在finally中執(zhí)行
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項(xiàng)目了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
標(biāo)題名稱(chēng)：如何整合打包Springboot與vue項(xiàng)目
網(wǎng)頁(yè)地址：http://chinadenli.net/article0/pijsoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站、小程序開(kāi)發(fā)、服務(wù)器托管、面包屑導(dǎo)航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 怎樣制作微信小程序 2021-08-08
- 微信小程序開(kāi)發(fā)的前景怎么樣，都有那些優(yōu)缺點(diǎn) 2021-08-24
- 微信公眾號(hào)微信小程序有哪些不同之處？ 2022-05-02
- 微信小程序正式上線，關(guān)于它的解答都在這里 2022-06-01
- 零基礎(chǔ)怎么玩轉(zhuǎn)微信小程序？ 2014-11-07
- 中小企業(yè)如何通過(guò)微信小程序獲取紅利 2021-01-31
- 【必看】微信小程序基礎(chǔ)知識(shí)全解 2022-05-30
- 微信小程序開(kāi)發(fā)的幾種優(yōu)勢(shì)和開(kāi)發(fā)費(fèi)用 2020-11-26
- 開(kāi)發(fā)微信小程序可以從這三個(gè)方面入手？ 2021-12-07
- 微信小程序怎么申請(qǐng)？微信怎么申請(qǐng)小程序？ 2022-05-13
- 什么是微信小程序?微信小程序能做什么? 2021-02-20
- 微信小程序怎么玩，入口在哪里？ 2022-01-30