快捷導(dǎo)航

將vue3項目打包后部署在springboot項目運行圖文教程

更新時間：2025年11月28日 10:36:53 作者：K***7284

這篇文章主要介紹了將vue3項目打包后部署在springboot項目運行的相關(guān)資料,文中通過代碼及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下

前端vite打包

vite 打包路徑配置

在 vite.config.js（.ts）設(shè)置開發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑（base配置項），這里不使用相對路徑

// vite.config.ts
export default defineConfig({
    plugins: [vue()],
    base:'/', // 設(shè)置項目的基礎(chǔ)路徑
    resolve:{
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname, 'src')
            }
        ]
    },
    server: {
        host: '0.0.0.0',
        proxy: {
            '/api': {
                target: 'http://localhost:8080', // 設(shè)置代理目標
                changeOrigin: true,
                rewrite: (path) => path.replace(/^/api/, '')
            }
        }
    }

})

打包命令（可選）

如果是 TS 項目，可以在打包命令后加上 --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。由于項目中有 thymeleaf 模板依賴，“index” 就是 template 中的 index.html

// BasicController.java
@Controller
public class BasicController {
    // http://127.0.0.1:8080/
    @RequestMapping("/")
    public String html(){
        return "index";
    }

}

如果前端項目的 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:/";
    }
}