將vue3項(xiàng)目打包后部署在springboot項(xiàng)目運(yùn)行圖文教程
前端vite打包
vite 打包路徑配置
在 vite.config.js(.ts) 設(shè)置開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑(base配置項(xiàng)),這里不使用相對(duì)路徑
// vite.config.ts
export default defineConfig({
plugins: [vue()],
base:'/', // 設(shè)置項(xiàng)目的基礎(chǔ)路徑
resolve:{
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
}
]
},
server: {
host: '0.0.0.0',
proxy: {
'/api': {
target: 'http://localhost:8080', // 設(shè)置代理目標(biāo)
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, '')
}
}
}
})
打包命令(可選)
如果是 TS 項(xiàng)目,可以在打包命令后加上 --noEmit,防止打包后生成大量 map 文件。
// package.json
"scripts": {
"dev": "vite --open",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
}
執(zhí)行打包
執(zhí)行 vscode 左下角配置好的 build 腳本

打包后在根目錄下可以看到生成的 dist 文件

后端springboot配置
靜態(tài)資源路徑配置(可選)
在 application.yml(.properties) 中配置 Web 靜態(tài)資源路徑,指定為 static
spring:
web:
resources:
static-locations: classpath:/static/
thymeleaf依賴
在 pom.xml 中加入 thymeleaf 模板的依賴并刷新 maven
// pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
轉(zhuǎn)移打包文件
將前端打包好的dist文件夾中的內(nèi)容復(fù)制到后端的 resource/static 中,新建 resource/templates 文件夾,將 index.html 放入 templates 中

請求返回html文件
新建一個(gè)控制器類,直接訪問本地8080端口時(shí)返回 index.html。由于項(xiàng)目中有 thymeleaf 模板依賴,“index” 就是 template 中的 index.html
// BasicController.java
@Controller
public class BasicController {
// http://127.0.0.1:8080/
@RequestMapping("/")
public String html(){
return "index";
}
}
如果前端項(xiàng)目的 vue-router 使用的是歷史模式(如下圖)

歷史模式
服務(wù)端需要增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè)index.html頁面,這個(gè)頁面就是你 app 依賴的頁面。
// BasicController.java
@Controller
public class BasicController {
// http://127.0.0.1:8080/
@RequestMapping("/")
public String html(){
return "index";
}
// 捕獲所有未匹配路徑并重定向到 index.html
@GetMapping("/**/{path:[^\.]*}") // 不匹配帶"."的路徑(如 .js/.css 等靜態(tài)資源)
public String redirect() {
return "forward:/";
}
}
啟動(dòng)項(xiàng)目
啟動(dòng) springboot 項(xiàng)目,瀏覽器地址欄輸入http://127.0.0.1:8080回車可以看到前端頁面
可能遇到的問題
頁面一刷新就404

檢查前端的 vue-router 使用歷史模式還是哈希模式,歷史模式(HTML5 模式)需要后端額外配置,配置參考上文。
https://router.vuejs.org/zh/guide/essentials/history-mode.html
頁面空白
可能是 js 和 css 文件沒有引入成功,查看 f12 網(wǎng)絡(luò)

檢查 index.html ,查看 script 和 link 標(biāo)簽的地址,應(yīng)該是絕對(duì)路徑(不含./)
頁面沒有數(shù)據(jù)
查看 f12 網(wǎng)絡(luò),檢查請求路徑有沒有錯(cuò)誤,是否存在跨域問題。檢查后端有沒有配置請求攔截器或者spring security進(jìn)行排除。
總結(jié)
到此這篇關(guān)于將vue3項(xiàng)目打包后部署在springboot項(xiàng)目運(yùn)行的文章就介紹到這了,更多相關(guān)vue3打包后部署springboot項(xiàng)目運(yùn)行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 如何把vuejs打包出來的文件整合到springboot里
- 打包部署若依(RuoYi)SpringBoot后端和Vue前端圖文教程
- Springboot項(xiàng)目與vue項(xiàng)目整合打包的實(shí)現(xiàn)方式
- vue打包部署到springboot并通過tomcat運(yùn)行的操作方法
- SpringBoot和VUE源碼直接整合打包成jar的踩坑記錄
- springboot如何使用vue打包過的頁面資源
- SpringBoot+Vue項(xiàng)目打包部署完整步驟教程
- vue打包部署到springboot的實(shí)現(xiàn)示例
- Vue3打包部署到SpringBoot3的詳細(xì)步驟
相關(guān)文章
Vue插槽slot詳細(xì)介紹(對(duì)比版本變化,避免踩坑)
Vue中的Slot對(duì)于編寫可復(fù)用可擴(kuò)展的組件是再合適不過了,下面這篇文章主要給大家介紹了關(guān)于Vue插槽slot詳細(xì)介紹的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解
今天小編就為大家分享一篇vue-router動(dòng)態(tài)設(shè)置頁面title的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中v-model動(dòng)態(tài)生成的實(shí)例詳解
這篇文章主要介紹了vue中v-model動(dòng)態(tài)生成的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10
Vue使用Print.js打印div方式(選中區(qū)域的html)
這篇文章主要介紹了Vue使用Print.js打印div方式(選中區(qū)域的html),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法
這篇文章主要介紹了Vue3子組件watch無法監(jiān)聽父組件傳遞的屬性值的解決方法,文中通過代碼示例講解的講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10

