embed嵌入前端資源,配置前端路由的代碼如下
func StartHttpService(port string, assetsFs embed.FS) error {//r := gin.Default()gin.SetMode(gin.ReleaseMode)r := gin.New()r.Use(CORSMiddleware())// 靜態文件服務dist, err := fs.Sub(assetsFs, "assets/dist")if err != nil {return fmt.Errorf("無法加載靜態文件: %v", err)}r.StaticFS("/", http.FS(dist))// API路由r.Any("/api/service", handler.ServiceControlsHandler)r.Any("/api/service/config", handler.ServiceConfigsHandler)// 處理前端路由r.NoRoute(func(c *gin.Context) {c.FileFromFS("index.html", http.FS(dist))})go func() {common.Logger.Info(fmt.Sprintf("Web服務正在啟動,監聽端口 :%s", port))err := r.Run(":" + port)if err != nil {common.Logger.Error(fmt.Sprintf("http service start error: %v", err))} else {common.Logger.Info("http service start success")}}()return nil
}
運行后報錯
panic: '/api/service' in new path '/api/service' conflicts with existing wildcard '/*filepath' in existing prefix '/*filepath'
問題解決步驟:
- 分析錯誤原因
在Gin框架中,路由注冊順序和路徑模式會導致沖突。當前代碼在注冊/api/service
路由時,與之前注冊的通配符路由/*filepath
發生沖突。Gin不允許在同一個路徑前綴上注冊多個處理函數。 - 確定解決方案
為了解決路由沖突問題,需要調整前端路由的基路徑:
- 將根路徑
/
重定向到/admin
- 修改前端構建配置,將靜態資源的基路徑設為
/admin
- 修改Golang代碼
在StartHttpService
函數中:
- 添加根路徑重定向:```gor.GET("/", func(c *gin.Context) {c.Redirect(http.StatusMovedPermanently, "admin/")})
- 修改靜態文件服務路徑:
r.StaticFS("/admin", http.FS(dist))
- 修改前端配置
在vite.config.js
中添加base配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({plugins: [vue()],base: '/admin/',
})
- 重新構建前端資源
執行npm run build
生成新的靜態資源,并確保生成的文件與/admin
路徑匹配。 - 驗證生效
重新啟動服務后:
- 訪問根路徑
/
會自動跳轉到/admin
- 前端路由和API路由將正常工作,不會有路徑沖突
此方案通過調整路由結構和前端配置,解決了Gin框架中的路由沖突問題,同時保持了前端應用的正常功能。