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文件用于存放后端渲染的模板，這里我們采用前后端分離的方式，因而該文件夾就沒(méi)有用了
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的話(huà)，將靜態(tài)文件拷貝到src/main/resources/static目錄下即可，這樣就可以在springboot工程打開(kāi)靜態(tài)文件了，對(duì)api的請(qǐng)求也無(wú)需再轉(zhuǎn)發(fā)，也沒(méi)有跨域問(wèn)題，比較適合管理后臺(tái)前端資源的整合。
doc
A Lovely Spring View: Spring Boot & Vue.js
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
MyBatisPlus3如何向數(shù)據(jù)庫(kù)中存入List
本文主要介紹了Mybatis Plus的類(lèi)型處理器的使用,通過(guò)User.java和UserMapper.xml示例進(jìn)行詳細(xì)的解析,并提供了JSON解析器的使用方法,希望通過(guò)這篇文章,可以幫助大家更好的理解和掌握Mybatis Plus的類(lèi)型處理器2024-10-10
Mac使用Idea配置傳統(tǒng)SSM項(xiàng)目(非maven項(xiàng)目)
本文主要介紹了Mac使用Idea配置傳統(tǒng)SSM項(xiàng)目(非maven項(xiàng)目),將展示如何設(shè)置項(xiàng)目結(jié)構(gòu)、添加依賴(lài)關(guān)系等,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
springboot掃碼登錄的簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹基于SpringBoot + Vue + Android實(shí)現(xiàn)的掃碼登錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Java由淺入深細(xì)數(shù)數(shù)組的操作上
數(shù)組對(duì)于每一門(mén)編程語(yǔ)言來(lái)說(shuō)都是重要的數(shù)據(jù)結(jié)構(gòu)之一，當(dāng)然不同語(yǔ)言對(duì)數(shù)組的實(shí)現(xiàn)及處理也不盡相同。Java?語(yǔ)言中提供的數(shù)組是用來(lái)存儲(chǔ)固定大小的同類(lèi)型元素2022-04-04
Spring Boot循環(huán)依賴(lài)的癥狀和解決方案
循環(huán)依賴(lài)是指在Spring Boot 應(yīng)用程序中，兩個(gè)或多個(gè)類(lèi)之間存在彼此依賴(lài)的情況，形成一個(gè)循環(huán)依賴(lài)鏈。這篇文章主要介紹了SpringBoot循環(huán)依賴(lài)的癥狀和解決方法2023-04-04
RestTemplate使用之如何設(shè)置請(qǐng)求頭、請(qǐng)求體
這篇文章主要介紹了RestTemplate使用之如何設(shè)置請(qǐng)求頭、請(qǐng)求體問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Simple Java Mail郵件發(fā)送實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了Simple Java Mail郵件發(fā)送實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要給大家介紹了關(guān)于Java字符串替換的三種方法,replace和replaceAll是JAVA中常用的替換字符的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Mybatis @SelectKey用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
Mybatis自定義TypeHandler解決特殊類(lèi)型轉(zhuǎn)換問(wèn)題詳解
這篇文章主要介紹了Mybatis自定義TypeHandler解決特殊類(lèi)型轉(zhuǎn)換問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11