將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)),這里不使用相對路徑
// 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文件
新建一個控制器類,直接訪問本地8080端口時返回 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ù)端需要增加一個覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個index.html頁面,這個頁面就是你 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:/";
}
}
啟動項(xià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)該是絕對路徑(不含./)
頁面沒有數(shù)據(jù)
查看 f12 網(wǎng)絡(luò),檢查請求路徑有沒有錯誤,是否存在跨域問題。檢查后端有沒有配置請求攔截器或者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+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)實(shí)例
今天小編就為大家分享一篇vue+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-quill-editor+plupload富文本編輯器實(shí)例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實(shí)例詳解,需要的朋友可以參考下2018-10-10
vue init webpack 項(xiàng)目初始化失敗問題
在使用Vue-cli搭建項(xiàng)目時,可能會遇到依賴無法顯示版本號的問題,首先檢查環(huán)境變量配置是否正確,確保vue-init的安裝目錄被正確添加到path中,若問題仍未解決,嘗試卸載并重新安裝webpack,確保在正確的項(xiàng)目路徑下執(zhí)行npm install和npm run dev命令2024-09-09
Vue.js中集成Socket.IO實(shí)現(xiàn)實(shí)時聊天功能
隨著 Web 技術(shù)的發(fā)展,實(shí)時通信成為現(xiàn)代 Web 應(yīng)用的重要組成部分,Socket.IO 是一個流行的庫,支持及時、雙向與基于事件的通信,適用于各種平臺和設(shè)備,本文將介紹如何在 Vue.js 項(xiàng)目中集成 Socket.IO,實(shí)現(xiàn)一個簡單的實(shí)時聊天應(yīng)用,需要的朋友可以參考下2024-12-12
vue項(xiàng)目關(guān)閉eslint校驗(yàn)
eslint是一個JavaScript的校驗(yàn)插件,通常用來校驗(yàn)語法或代碼的書寫風(fēng)格。這篇文章主要介紹了vue項(xiàng)目關(guān)閉eslint校驗(yàn),需要的朋友可以參考下2018-03-03

