第一步构建 vue project

可以创建一个简单的vue3 + vite 的项目。 编译时,需要将发布路径设置为 /public/ ,完成后,将 dist 文件夹移动到 go 项目的根文件夹。

嵌入资源文件

嵌入资源文件主要是使用 Go 1.16后增加的编译 //go:embed 预编译方式。 我使用的是 Go 1.18.3 版本。

修改 main.go

package main

import (
	"embed"
	"io/fs"
	"net/http"
)

// 注意 嵌入文件夹的时候,要使用 dist/** 形式告诉编译器要包括下划线开头的文件以及英文句点开头的隐藏文件
// 用如下的配置可以导入 vue工程使用vite编译的dist文件夹
// 多行 go:embed 可以将多个文件夹内容合并到一个embed.FS中去

//go:embed dist/favicon.ico dist/index.html dist/_app.config.js
//go:embed dist/assets/** dist/resource/**
// 注意:形成的路径以项目根文件夹为默认的WEB根路径
var static embed.FS

func main() {
	r := gin.Default()
	r.Use(cors.Default())

	// 软链接的目录也是可以的
	//r.StaticFS("/static", http.Dir("./static"))

	// 去除子路径 dist,并将去除后的路径映射为 public
	root, _ := fs.Sub(static, "dist")
	r.StaticFS("/public", http.FS(root))
  // 访问 http://localhost:8080/public/ 即可访问到静态资源文件
  // 对于动态的路由,增加如下函数进行处理即可。
  	r.NoRoute(func(c *gin.Context) {
		data, err := static.ReadFile("dist/index.html")
		if err != nil {
			_ = c.AbortWithError(http.StatusInternalServerError, err)
			return
		}
		c.Data(http.StatusOK, "text/html; charset=utf-8", data)
	})
	// 启动服务
	r.Run(":8080")
}

注意事项

使用预编译go:embed方式嵌入静态资源的方式,将会增加应用程序的内存占用,甚至可能导致程序运行缓慢,因此实际使用时要进行评估与取舍。

对于 vue 项目结合 go 的前后端分离方式的应用而言,一般不建议使用go:embed嵌入,毕竟如此用法违反了前后端分离的初衷,耦合过于紧密。