如何将打包好的前端内嵌到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