vue gin合并部署(完美方案)

简介

目前 vue 与 gin 的项目基本都是前后端分离部署

二者合并部署的教程非常少，且各有各的问题

结合各个教程后找到一种比较完美的合并部署方案

vue

使用 axios 时进行如下配置

const request = axios.create({
  baseURL: `${currentDomain}/api`,
  timeout: 5000,
  headers: { "Cache-Control": "no-cache" },
});

对 baseURL 进行设置是为了能够使用户请求时，前后端的域名端口完全一致，避免造成跨域（必须）

并且对于非域名部署的情况，能够方便地动态调整，避免写死 baseURL

headers 的设置是为了 vue dev 环境下，前后端的联调

同时

为了 dev 联调避免出现跨域问题，还应添加代理

export default defineConfig({
  // 其他参数
  server: {
    // port: 8080,
    // open: true,
    proxy: {
      "/api": {
        target: "http://localhost:5731",
        changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, ""), // 移除 /api 前缀 根据前后端代码 自行修改
      },
    },
  },
});

额外配置 build 后任务，将构建好的 dist 复制到后端目录下

"scripts": {
    "dev": "vite",
    "build": "vite build && robocopy ./dist 后端路径/vue /e /z /r:0",
    "preview": "vite preview"
  },

方便一部送到位

gin

❯ tree
文件夹 PATH 列表
卷序列号为 AE05-588D
C:.
├─main.go
├─其他
└─vue /* 可改 */
    └─assets

main.go 添加 embed 和路由

//go:embed  vue/index.html
var indexHtml []byte

//go:embed  vue/*
var vue embed.FS

func main() {
	// 其他设置

    // 配置允许跨域 方便dev联调
	r.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"*"}, // 允许的域名
		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE"},
		AllowHeaders:     []string{"Origin", "Content-Type", "Authorization", "Cache-Control"},
		AllowCredentials: true,
	}))

	// 配置vue路由
	assets, _ := fs.Sub(vue, "vue/assets")
	r.StaticFS("/assets", http.FS(assets))
	icon, _ := fs.ReadFile(vue, "vue/favicon.ico")
	r.GET("/favicon.ico", func(c *gin.Context) { c.Data(200, "image/x-icon", icon) })
	r.NoRoute(func(c *gin.Context) {
		c.Data(200, "text/html; charset=utf-8", indexHtml)
	})

    // 其他路由
}