springboot整合vue項(xiàng)目(小試牛刀)
序
本文主要研究一下如何在springboot工程整合vue
maven
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
新建springboot的web工程，默認(rèn)會(huì)在resources目錄下生成static以及templates文件夾
templates文件用于存放后端渲染的模板，這里我們采用前后端分離的方式，因而該文件夾就沒有用了
static文件夾就是存放靜態(tài)文件的地方
plugin
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<!-- mvn process-resources -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy Vue.js frontend content</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>src/main/resources/static</outputDirectory>
<overwrite>true</overwrite>
<resources>
<resource>
<directory>${basedir}/vue-demo/dist</directory>
<includes>
<include>static/</include>
<include>index.html</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
這里我們使用了maven-resources-plugin插件，將vue工程npm run build之后的dist文件夾下的文件拷貝到static目錄下
這里我們假設(shè)vue工程名為vue-demo，在這個(gè)springboot工程的根目錄下
對(duì)于vue工程，首先執(zhí)行npm run build生成靜態(tài)文件，之后對(duì)maven工程執(zhí)行mvn process-resources，就可以一鍵拷貝
小結(jié)
在springboot工程整合vue的話，將靜態(tài)文件拷貝到src/main/resources/static目錄下即可，這樣就可以在springboot工程打開靜態(tài)文件了，對(duì)api的請(qǐng)求也無需再轉(zhuǎn)發(fā)，也沒有跨域問題，比較適合管理后臺(tái)前端資源的整合。
doc
A Lovely Spring View: Spring Boot & Vue.js
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
SpringBoot通過計(jì)劃任務(wù)發(fā)送郵件提醒的代碼詳解
在實(shí)際線上項(xiàng)目中,有不斷接受到推送方發(fā)來的數(shù)據(jù)場(chǎng)景,而且是不間斷的發(fā)送,如果忽然間斷了,應(yīng)該是出問題了,需要及時(shí)檢查原因,這種情況比較適合用計(jì)劃任務(wù)做檢查判斷,出問題發(fā)郵件提醒,本文給大家介紹了SpringBoot通過計(jì)劃任務(wù)發(fā)送郵件提醒,需要的朋友可以參考下2024-11-11
springboot 使用Spring Boot Actuator監(jiān)控應(yīng)用小結(jié)
本篇文章主要介紹了springboot 使用Spring Boot Actuator監(jiān)控應(yīng)用小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Java對(duì)象和Map之間相互轉(zhuǎn)換的五種方法
在Java開發(fā)中,經(jīng)常需要將Java對(duì)象轉(zhuǎn)換成Map,或者反過來將Map轉(zhuǎn)換成Java對(duì)象,這種轉(zhuǎn)換在很多場(chǎng)景下都非常有用,比如在序列化和反序列化過程中、在數(shù)據(jù)傳輸和持久化時(shí)、或者在進(jìn)行對(duì)象屬性的批量操作時(shí),本文將介紹幾種不同的方法來實(shí)現(xiàn)Java對(duì)象和Map之間的相互轉(zhuǎn)換2025-02-02
Spring Gateway自定義請(qǐng)求參數(shù)封裝的實(shí)現(xiàn)示例
這篇文章主要介紹了Spring Gateway自定義請(qǐng)求參數(shù)封裝的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Java實(shí)現(xiàn)調(diào)用外部程序的示例代碼
本文主要介紹了Java實(shí)現(xiàn)調(diào)用外部程序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
java讀取excel圖片導(dǎo)入代碼示例(親測(cè)有效)
在日常工作中,我們經(jīng)常要將一些照片插入到Excel表格中,這篇文章主要給大家介紹了關(guān)于java讀取excel圖片導(dǎo)入的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Springboot項(xiàng)目升級(jí)2.2.x升至2.7.x的示例代碼
本文主要介紹了Springboot項(xiàng)目升級(jí)2.2.x升至2.7.x的示例代碼,會(huì)有很多的坑,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Spring Boot集成kubernetes客戶端實(shí)現(xiàn)API操作k8s集群的方案
Kubernetes是一個(gè)開源的容器編排平臺(tái),可以自動(dòng)化在部署、管理和擴(kuò)展容器化應(yīng)用過程中涉及的許多手動(dòng)操作,這篇文章主要介紹了Spring Boot集成kubernetes客戶端實(shí)現(xiàn)API操作k8s集群,需要的朋友可以參考下2024-08-08
springboot集成CAS實(shí)現(xiàn)單點(diǎn)登錄的示例代碼
這篇文章主要介紹了springboot集成CAS實(shí)現(xiàn)單點(diǎn)登錄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Mybatis 自動(dòng)映射(使用需謹(jǐn)慎)
這篇文章主要介紹了Mybatis 自動(dòng)映射(使用需謹(jǐn)慎),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10