无法使用 NoRoute 函数为 vue.js SPA 应用提供服务

在使用 Gin 框架为 Vue.js SPA 应用提供服务时，使用 NoRoute 函数会出现无法路由子路由的问题。本文提供了两种解决方案：一种是使用中间件和自定义 NoRoute 函数，另一种是使用 Gin-Static 中间件。文章详细介绍了这两种解决方案的实现方式，并分析了它们的优缺点。

我有一个项目正在建立一个 gin 服务器，在同一个 docker 容器中托管 api 和 spa vue.js 应用程序：

code
├── main.go
├── routes
│   └── routes.go
├── controllers
│   ├── controllers.go
│   ...
└── web
    ├── src
    │   └── app.vue
    ├── dist
    ├── public
    ...

当前端托管在开发人员 js 服务器中时，前端运行良好，并且单独的 api 也运行良好，但是当我在 gin 服务器中托管 vue.js 应用程序时，后端 gin 路由器以常规“/”显示我的应用程序路线，但在尝试访问由 vuerouter 管理的子路线时给我 404。我希望能够将 api 之外的任何内容路由到 vuerouter，我的代码基于一些指南，还尝试解决我在产品中发现的问题，但没有成功：

• https://github.com/gin-gonic/contrib/issues/90
• https://github.com/gin-gonic/gin/issues/75

这是我的 routes.go：

package routes

import (
    "path"
    "strings"
    "devops-portal/controllers"
    "github.com/gin-gonic/gin"
    "net/http"
    "github.com/gobuffalo/packr/v2"
)

//setuprouter ... configure routes
func setuprouter() *gin.engine {
    r := gin.default()
    webfiles := packr.new("web app", "../web/dist")
    r.use(staticserve("/", webfiles))

    grp1 := r.group("/api/v1")
    {
        grp1.get("request", controllers.getrequests)
        grp1.post("create-request", controllers.createrequest)
        grp1.get("request/:id", controllers.getrequestbyid)
        grp1.put("request/:id", controllers.updaterequest)
        grp1.delete("request/:id", controllers.deleterequest)
    }
    r.noroute(func(c *gin.context){
    c.file("../web/dist/index.html")
    })

    return r
}

func returnpublic() gin.handlerfunc {
    return func(context *gin.context) {
        method := context.request.method
        if method == "get" {
            context.file("./public")
        } else {
            context.next()
        }
    }
}

func exists(fs *packr.box, prefix string, filepath string) bool {
    if p := strings.trimprefix(filepath, prefix); len(p) < len(filepath) {
        name := path.join("/", p)
        if fs.hasdir(name) {
            index := path.join(name, "index.html")
            if !fs.has(index) {
                return false
            }
        } else if !fs.has(name) {
            return false
        }

        return true
    }
    return false
}

// staticserve serves the web app
func staticserve(urlprefix string, fs *packr.box) gin.handlerfunc {
    fileserver := http.fileserver(fs)
    if urlprefix != "" {
        fileserver = http.stripprefix(urlprefix, fileserver)
    }
    return func(c *gin.context) {
        if exists(fs, urlprefix, c.request.url.path) {
            fileserver.servehttp(c.writer, c.request)
            c.abort()
        }
    }
}

vuerouter - web/src/router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Auth from '@okta/okta-vue'

Vue.use(Auth, {
  issuer: 'https://xxxxx.okta.com/',
  client_id: 'xxxxxxxxxxxxxxxx',
  redirect_uri: 'http://localhost:3000/implicit/callback',
  scope: 'openid profile email',
  pkce: true
})

Vue.use(VueRouter)

const routes = [
    { path: '/login', name: 'Login', component: () => import('../views/Login.vue')},
    { path: '/', name: 'Home', component: () => import('../views/requests.vue'), meta: { requiresAuth: true }},
    { path: '/requests', name: 'Requests', component: () => import('../views/requests.vue'), meta: { requiresAuth: true }},
    { path: '/implicit/callback', component: Auth.handleCallback() }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach(Vue.prototype.$auth.authRedirectGuard());

export default router

解决方案

对于遇到此问题的任何人，我可以通过删除从问题中复制的所有中间件并简单地使用 gin-static 中间件来解决我的问题：

r := gin.Default()

r.Use(static.Serve("/", static.LocalFile("./web/dist", true)))
grp1 := r.Group("/api/v1")
{
    grp1.GET("request", Controllers.GetRequests)
    grp1.POST("create-request", Controllers.CreateRequest)
    grp1.GET("request/:id", Controllers.GetRequestByID)
    grp1.PUT("request/:id", Controllers.UpdateRequest)
    grp1.DELETE("request/:id", Controllers.DeleteRequest)
}
r.NoRoute(func(c *gin.Context){
    c.File("./web/dist/index.html")
})

终于介绍完啦！小伙伴们，这篇关于《无法使用 NoRoute 函数为 vue.js SPA 应用提供服务》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布Golang相关知识，快来关注吧！