gin+vue如何适配HTML5 History Mode

by kingzcheung on December 20, 2018

Golang 的web 项目都会自己去实现一个web服务器,现在前端使用vue或者reactjs框架开发非常流行,如果我们以golang为后端,以vue或者reactjs为前端实现一个项目的话,如何实现对前端路由中的HTML5 History Mode的支持呢?

我们先看看 nginx 如何去实现:

nginx 配置

location / {
  try_files $uri $uri/ /index.html;
}

上面的配置的意思是,uri会先尝试匹配文件,如果匹配不到文件,就尝试匹配目录,如果目录也不存在,就跳转到 index.html 中去。

我们只需要在go-gin 中的路由实现这个逻辑即可。

下面代码有两个前提:

  • /admin 才是前端项目的根目录
  • 前端入口在 /dist目录中

在gin中,先建立静态文件路由,可以使用 router.Static()方法,这里使用一个中间件:github.com/gin-contrib/static

    router.Use(static.Serve("/admin", static.LocalFile("dist", false)))

再使用 router.NoRoute去接管没有匹配到的路由:

router.NoRoute(func(c *gin.Context) {
        path := strings.Split(c.Request.URL.Path, "/")
        if len(path) > 1 {
            if path[1] == "admin" {
                c.File("dist/index.html")
                return
            }
        }
        
        c.JSON(http.StatusNotFound, gin.H{
            "error": "请求错误",
            "code":  404,
            "data":  nil,
        })
    })