优享资讯 | Go是否可以加载Vue打包后的前端资源呢

掘金后端 ( ) • 2024-04-25 09:52

答案是肯定，这里将详细阐述操作步骤

环境

Vue 3 https://vuejs.org/
Vue Router
Vite 5 (由Vue作者研发的打包工具) https://vitejs.dev/
Go 1.20 https://golang.google.cn/
Gin 1.9 https://github.com/gin-gonic/gin

思路整理

先来理理思路，使用Vite打包后的文件由Web服务器代理下就能正常运行，使用Gin的Go程序启动后就是Web服务（其核心是go http包提供的），简单画个交互图 说明：浏览器请求根路径Server返回index.html文件，浏览器通过index.html文件发现需要请求其他资源会发请求再次获取，Server端正常返回即可，值得说明的是Server需要正确说明返回资源的文件类型，这样浏览器才能正确解析

总结：根据路径返回正确的资源和Content-Type就搞定了

操作步骤

1. 使用Vite打包前端资源

vite build

打包后创建了dist目录，dist目录包含了所有使用到的文件

index.html 入口
favicon.ico 浏览器tab图标
assets 依赖的css,js等资源

为了方便管理这里放到了static目录中（其他目录也可以只要和后续流程匹配即可），同时创建了初始化文件init.go

3. 加载所有文件

///go:embed static/*
var staticFS embed.FS

使用embed加载资源文件，其实就是读取指定目录所有文件，截图看下内部结构

4. 配置index.html和favicon.ico

index.html

	g.GET("/", func(c *gin.Context) {
		c.Writer.WriteHeader(200)
		c.Header("Content-Type", "text/html; charset=utf-8")
		b, _ := staticFS.ReadFile("static/index.html")
		_, _ = c.Writer.Write(b)
		c.Writer.Flush()
	})

配置根路径返回index.html并设置相应的Content-Type（注意：设置Content-Type需要在Writer.wirte之前）

favicon.ico

	g.GET("/favicon.ico", func(c *gin.Context) {
		c.Writer.WriteHeader(200)
		b, _ := staticFS.ReadFile("static/favicon.ico")
		_, _ = c.Writer.Write(b)
		c.Writer.Flush()
	})

5. 配置其他资源

	g.GET("/assets/:filepath", func(c *gin.Context) {
		c.Writer.WriteHeader(200)
		filePath := c.Param("filepath")
		b, _ := staticFS.ReadFile("static/assets/" + filePath)
		contentType := ""
		if strings.HasSuffix(filePath, ".js") {
			contentType = "text/javascript"
		}
		if strings.HasSuffix(filePath, ".css") {
			contentType = "text/css"
		}
		c.Header("Content-Type", contentType)
		_, _ = c.Writer.Write(b)
		c.Writer.Flush()
	})

其他资源都在assets目录中具有相同的路径所以可以使用通配符来匹配，同样的Content-Type需要正确指定

继续聊聊

Vue Router需要是Hash模式

它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理

一探究竟 -> https://router.vuejs.org/zh/guide/essentials/history-mode.html

为什么Sever端设置Content-Type需要在Writer.wirte方法前
_c.Writer.Write(b) _这个方法是将Server响应数据返回给浏览器，数据都已经写完了再去设置数据的属性是不是太晚了