golang gin单独部署vue3.0前后端分离应用

概述

因为公司最近的项目前端使用vue 3.0，后端api使用golang gin框架。测试通过后，博文记录，用于备忘。

步骤

1. npm run build，构建出前端项目的dist目录，dist目录的结构具体如下图
   
2. 将dist目录复制到后端程序同级目录，后端代码中添加以下命令

	r := gin.Default()
	r.Static("/css", "./dist/css")
	r.Static("/img", "./dist/img")
	r.Static("/js", "./dist/js")
	r.LoadHTMLGlob("dist/*.html") // 加载 HTML 模板
	r.GET("/", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.html", gin.H{})
	})
	....
1
2
3
4
5
6
7
8
9

3. ./后端程序执行即可

参考链接中有第二种部署方法，具体差异暂时未知。

参考链接

gin 部署 vue
用gin来代理静态请求