Golang编译打包Vue项目到二进制包—HI技术分享

前面我们已经讲过如何将Gin和静态文件打包到二进制文件：Gin编译打包静态文件和模板文件。但是这里打包的文件只是单纯的html和一些静态文件，如果遇到Vue编译后的文件该如何打包呢？

项目目录结构：

├── config
├── controllers
├── templates
│   ├── public
│   ├── src
│   ├── node_modules
├── services
├── routers
├── main.go

这里将vue的文件都放在templates下面，src里面就是vue相关文件。

一、Vue编译过程

我们知道，vue打包后的入口文件在dist中的index.html，单一入口，所以这里我们一定要注意，我们Golang程序中一定有个路由要对应到这个index.html。所以我们在选择Vue路由模式的时候需要采用Hash，而不是history，否则在刷新页面的时候讲请求不到该页面。

1.1、设置Vue路由模式为Hash（一般默认为Hash，如果有设置为history可以屏蔽掉）

1.2、修改BASE_URL

// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/static'
  : '/'

这里需要加一个static，为了后面Golang中访问静态资源文件。

1.3、编译

这里的vue文件都在templates下，所以需要进入到该目录去执行下面的命令

npm run build

二、Go编译过程

2.1、新增index.html访问路由

router.GET("/", func(context *gin.Context) {
	context.HTML(200, "index.html", nil)
})

2.2、使用bindata打包静态资源文件

go-bindata -o=bindata/bindata.go -pkg=bindata ./templates/dist/...

第一步编译的文件都放在./templates/dist下面，后面的三个点一定要写，别写错了。

2.3、加载模板文件和静态文件

在没有使用bindata的情况下，需要如下的方式进行加载

router.LoadHTMLGlob("./templates/dist/index.html") //加载模板文件
router.Static("/static", "./templates/dist")       //加载静态资源，例如网页的css、js

因为打包后只有一个index.html的html文件，所以这里只加载了单个文件。静态资源文件一定要设置为：./templates/dist，资源文件都在这个下面。

如果已经通过bindata进行打包后，代码需要进行如下修改：

//加载模板文件
t, err := loadTemplate()//新定义的函数
if err != nil {
	panic(err)
}
router.SetHTMLTemplate(t)

//加载静态资源，例如网页的css、js
fs := assetfs.AssetFS{
	Asset:     bindata.Asset,
	AssetDir:  bindata.AssetDir,
	AssetInfo: nil,
	Prefix:    "templates/dist", //静态文件前缀路径，这里一定不要错了，是静态文件的目录前缀templates/dist
}
router.StaticFS("/static", &fs)

对应的loadTemplate函数：

//加载模板文件
func loadTemplate() (*template.Template, error) {
	t := template.New("")
	for _, name := range bindata.AssetNames() {
		if !strings.HasSuffix(name, ".html") {
			continue
		}
		asset, err := bindata.Asset(name)
		if err != nil {
			continue
		}
		name := strings.Replace(name, "templates/dist/", "", 1)
		t, err = t.New(name).Parse(string(asset))
		if err != nil {
			return nil, err
		}
	}
	return t, nil
}

这里将templates/dist/替换掉，是为了不想去修改调用时候的路径

context.HTML(200, "index.html", nil)

这里就继续要保持这样的形式即可，否则就需要按照路径进行修改。

2.4、进行编译

go build -o 编译后文件名称

以上就是记录如何将vue打包到Golang二进制文件中。