Go 工程目录结构

  1. .
  2. |-- dist
  3. |   |-- assets
  4. |   |   |-- index.263506ea.js
  5. |   |   |-- index.6f3e7c5a.css
  6. |   |   `-- vendor.bd15b400.js
  7. |   |-- dist.go
  8. |   |-- favicon.ico
  9. |   `-- index.html
  10. |-- go.mod
  11. |-- go.sum
  12. `-- main.go

注意上面第二行目录 其实也就是直接把 vue 构建好的项目目录, 然后在里面新建一个文件

相关Go 文件

第七行 dist.go

  1. // dist/dist.go
  2. package dist
  4. import "embed"
  6. //go:embed *
  7. var Static embed.FS

第12行 main.go

  1. package main
  3. import (
  4.     "gin-vue/dist"
  5.     "net/http"
  7.     "github.com/gin-gonic/gin"
  8. )
  10. func main() {
  11.     r := gin.Default()
  12.     r.StaticFS("/static", http.FS(dist.Static))
  13.     r.GET("/", func(c *gin.Context) {
  14.         c.Request.URL.Path = "/static"
  15.         r.HandleContext(c)
  16.     })
  18.     r.Run(":8080")
  19. }

上面第4行中的 gin-vue 改成你的go项目名称, 也就是 go.mod 文件中的模块名

关于vue3的访问路径 /static

上面将vue项目文件放置到了二级目录,构建vue应用是需要改构建后路径
如果你是 vite 构建
修改 vue 项目中的 package.json 配置文件中的 scripts >> build
image.png