如何將打包好的前端內嵌到gin後端專案中

前端內嵌到go專案中，最後生成一個二進制檔案，將前端後端一同開啟

1. web.go中把靜態檔案嵌入

   package web
   
   import "embed"
   
   //go:embed assets favicon.ico index.html
   var Static embed.FS

2. 前端vite配置加上'/ui/'

   export default defineConfig({
     base: '/ui/',
     plugins: [
       vue(),
       vueJsx(),
     ],
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       }
     }
   })

   注意如果這時候axios的配置是 const instance = axios.create({ baseURL: import.meta.env.BASE_URL });

   設定了.env.development和.env.production會訪問這裏麵設定的，如果為空，就會訪問/ui/...

   但是因為現在前端後端都用一個介面了，不需要特別指定了，可以直接指定baseURL為空，就會訪問到同一埠下的api了

   const instance = axios.create({
       baseURL: ''
   });

3. 後端為靜態資源配置訪問路徑 現在訪問'/'會直接跳轉到'/ui'，顯示前端頁面。不能直接配置給'/'，否則會出現路徑衝突。

       engine.GET("/", func(c *gin.Context) {
           c.Redirect(http.StatusMovedPermanently, "ui/")
       })
       engine.StaticFS("/ui", http.FS(web.Static))

4. 出現一個問題 就是頁面重新整理顯示該頁面不存在，原因是在前端路由時，存在類似於/index/review的頁面，可是重新整理時，後端這邊接收到的就是對/ui/index/review的GET請求

   後端需要新增路由

   // 捕獲所有/ui/*路徑，返回index.html
   engine.NoRoute(func(c *gin.Context) {
       if strings.HasPrefix(c.Request.URL.Path, "/ui/") && c.Request.Method == "GET" {
           c.Redirect(http.StatusMovedPermanently, "/ui")
       } else {
           c.JSON(http.StatusNotFound, gin.H{"message": "Not found"})
       }
   })

   這時候前端可能重新整理之後一直返回Index，要想要選中選單正確，需要用menuStore在每次重新整理時，根據store去push路由

作者：yangyue_serena
連結：https://juejin.cn/post/7433687162870415396