likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 12

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

环境

思路整理

先来理理思路,使用Vite打包后的文件由Web服务器代理下就能正常运行,使用Gin的Go程序启动后就是Web服务(其核心是go http包提供的),简单画个交互图 Go是否可以加载Vue打包后的前端资源呢 说明:浏览器请求根路径Server返回index.html文件,浏览器通过index.html文件发现需要请求其他资源会发请求再次获取,Server端正常返回即可,值得说明的是Server需要正确说明返回资源的文件类型,这样浏览器才能正确解析 总结:根据路径返回正确的资源和Content-Type就搞定了

操作步骤

1. 使用Vite打包前端资源

vite build

Go是否可以加载Vue打包后的前端资源呢 打包后创建了dist目录,dist目录包含了所有使用到的文件

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

2. 将dist目录内容复制到Go目录中

Go是否可以加载Vue打包后的前端资源呢 为了方便管理这里放到了static目录中(其他目录也可以只要和后续流程匹配即可),同时创建了初始化文件init.go

3. 加载所有文件

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

使用embed加载资源文件,其实就是读取指定目录所有文件,截图看下内部结构 Go是否可以加载Vue打包后的前端资源呢

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 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理

一探究竟 -> router.vuejs.org/zh/guide/es… 为什么Sever端设置Content-Type需要在Writer.wirte方法前 _c.Writer.Write(b) _这个方法是将Server响应数据返回给浏览器,数据都已经写完了再去设置数据的属性是不是太晚了

Go是否可以加载Vue打包后的前端资源呢摸鱼时刻Go是否可以加载Vue打包后的前端资源呢

推荐一款异性工具鱼:直升机

  • 淡水小型热带鱼,成年15厘米左右
  • 饲养温度:26左右
  • 饲养难度:中
  • 偏素食,清理缸内藻类和残食

Go是否可以加载Vue打包后的前端资源呢 皇冠直升机

Go是否可以加载Vue打包后的前端资源呢 红蜻蜓直升机

Go是否可以加载Vue打包后的前端资源呢 阴阳直升机

转载自:https://juejin.cn/post/7361317042567479305
评论
请登录