介绍

为方便部署，在开发时，可以是前后端分离的，但进行部署的时候，在某些领域前后端分离部署显得多此一举，为了让部署变得简单，所以需要考虑是否可以将前端与后端在生产时直接生成为一个文件

所需工具

1https://github.com/go-bindata/go-bindata
2https://github.com/elazarl/go-bindata-assetfs
3//主要执行这个命令,会生成可执行文件到GOPATH/bin下,最好将GOPATH/bin加载到环境变量中
4go get -u github.com/elazarl/go-bindata-assetfs/...

静态文件

• 纯静态文件存放的位置/assets/ui

  ├─assets │ └─ui │ └─favicon.ico │ └─index.html │ └─static │ └─css │ └─chunk-vendors.e7c7f1bd.css │ └─chunk-vendors.e7c7f1bd.css.gz │ └─index.ddf786eb.css │ └─fonts │ └─ionicons.99ac3308.woff │ └─ionicons.143146fa.woff2 │ └─ionicons.d535a25a.ttf │ └─img │ └─ionicons.a2c4a261.svg │ └─js │ └─chunk-vendors.e71bcf88.js │ └─chunk-vendors.e71bcf88.js.gz │ └─index.0cc53347.js │ └─index.0cc53347.js.gz

• -o 生成的接口存放的位置

• -pkg 生成的接口包名

  go-bindata-assetfs -o=assets/assets.go -pkg=assets assets/ui/...

• 最终接口位置/assets/assets.go

  ├─assets │ └─ui │ └─favicon.ico │ └─index.html │ └─static │ └─css │ └─chunk-vendors.e7c7f1bd.css │ └─chunk-vendors.e7c7f1bd.css.gz │ └─index.ddf786eb.css │ └─fonts │ └─ionicons.99ac3308.woff │ └─ionicons.143146fa.woff2 │ └─ionicons.d535a25a.ttf │ └─img │ └─ionicons.a2c4a261.svg │ └─js │ └─chunk-vendors.e71bcf88.js │ └─chunk-vendors.e71bcf88.js.gz │ └─index.0cc53347.js │ └─index.0cc53347.js.gz │ └─assets.go

数据准备好了，哪么就是进行使用

• 进行如下定义（文中是结合的Gin）

  //静态文件路径 const staticPath = assets/ui/

  var ( css = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/css", Fallback: "index.html", } js = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/js", Fallback: "index.html", } fonts = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/fonts", Fallback: "index.html", } img = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath + "static/img", Fallback: "index.html", } fs = assetfs.AssetFS{ Asset: assets.Asset, AssetDir: assets.AssetDir, AssetInfo: assets.AssetInfo, Prefix: staticPath, Fallback: "index.html", } )

• main

  func main() { engine := gin.Default() // 加载静态文件 engine.StaticFS("/favicon.ico", &fs) engine.StaticFS("static/css", &css) engine.StaticFS("static/fonts", &fonts) engine.StaticFS("static/img", &img) engine.StaticFS("static/js", &js) engine.GET("/", func(context *gin.Context) { //设置响应状态 context.Writer.WriteHeader(http.StatusOK) //载入首页 indexHTML, _ := assets.Asset(staticPath + "index.html") context.Writer.Write(indexHTML) //响应HTML类型 context.Writer.Header().Add("Accept", "text/html") //显示刷新 context.Writer.Flush() }) ... }

如果您有更优雅的写法请留言,共同讨论,谢谢