利用golang embed特性嵌入前端资源问题解决

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'

问题解决步骤:

  1. 分析错误原因
    在Gin框架中,路由注册顺序和路径模式会导致冲突。当前代码在注册/api/service路由时,与之前注册的通配符路由/*filepath发生冲突。Gin不允许在同一个路径前缀上注册多个处理函数。
  2. 确定解决方案
    为了解决路由冲突问题,需要调整前端路由的基路径:
  • 将根路径/重定向到/admin
  • 修改前端构建配置,将静态资源的基路径设为/admin
  1. 修改Golang代码
    StartHttpService函数中:

    • 添加根路径重定向:
      go 复制代码
      r.GET("/", func(c *gin.Context) {
          c.Redirect(http.StatusMovedPermanently, "admin/")
      })
  • 修改静态文件服务路径:

    r.StaticFS("/admin", http.FS(dist))

  1. 修改前端配置
    vite.config.js中添加base配置:

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    export default defineConfig({
    plugins: [vue()],
    base: '/admin/',
    })

  2. 重新构建前端资源
    执行npm run build生成新的静态资源,并确保生成的文件与/admin路径匹配。

  3. 验证生效
    重新启动服务后:

  • 访问根路径/会自动跳转到/admin
  • 前端路由和API路由将正常工作,不会有路径冲突
    此方案通过调整路由结构和前端配置,解决了Gin框架中的路由冲突问题,同时保持了前端应用的正常功能。
相关推荐
xywww1687 分钟前
真实后台页实测:Opus 5 看图写前端的可用边界在哪
linux·服务器·前端·数据库·人工智能·gpt
小小尚@25 分钟前
AE脚本-AE Actions v1.1.8 操作动作记录器
开发语言·前端·javascript·jupyter·postman
大家的林语冰1 小时前
👍 超越 ESLint,Oxc 优先采用 TypeScript 7,Rust 和 Go 梦幻联动!
前端·javascript·typescript
吴声子夜歌2 小时前
正则指引——Golang
开发语言·golang·正则表达式
樊小肆2 小时前
# 你还在等DeepSeek官方 agent Harness‌? 来试试 DeepSeeker-Code吧
前端·人工智能·后端
樊小肆2 小时前
2568 万 token 才花 2 块 2:聊聊 DeepSeeker-Code 怎么吃满上下文缓存
前端·人工智能·后端
JarvanMo2 小时前
Flutter 3.47: material/cupertino终于解耦了
前端
郭邯3 小时前
一次「字符洁癖」引发的思考:我用 AI 写了个全角半角转换工具
前端
想要成为糕糕手3 小时前
🚀 在浏览器里跑 DeepSeek-R1?WebGPU 端侧推理实战(五)—— 中断、重置、缓存与流式生成
前端·react.js·llm
GuWenyue3 小时前
后端接口又双叒没写好?3 步搭建前端 Mock,从此告别"傻等后端"
前端·mocha