Vue+GIN前后端分离项目打包成二进制

问题

使用GIN自带静态资源服务器需要设置一个子目录,而这对于Vue项目来说显然是不合理的,如果使用根目录则会和其他路由冲突,所以需要对静态资源针对性处理

原理

使用Gin的中间件实现过滤API请求,statik用来打包Vue项目资源

解决方案

将api相关路由统一设置在/api

这里直接给出中间件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
func ProcessStaticFiles(c *gin.Context) {
path := c.Request.URL.Path

// API 跳过
if strings.HasPrefix(path, "/api") {
c.Next()
return
}

statikFS, err := fs.New()
if err != nil {
log.Fatal(err)
}
//此处处理静态资源
fileServer := http.FileServer(statikFS)
fileServer.ServeHTTP(c.Writer, c.Request)
//处理完静态资源,调用c.Abort()中断请求
c.Abort()
}

这样在实现能够直接访问到Vue项目的同时不影响后端API的路由

Vue+GIN前后端分离项目打包成二进制

https://jktu.cc/Vue+GIN前后端分离项目打包成二进制/

作者

udp_bbr

发布于

2021-04-03

更新于

2021-04-03

许可协议