Golang编译打包Vue项目到二进制包

xiaohai 2020-08-20 11:20:15 2135人围观 标签: Go  Vue 
简介Golang打包一般的静态资源文件到二进制文件中还是比较简单,但是如果遇到使用Vue编写的后台界面,该如何打包呢?本文就是记录如何打包Vue到二进制包

前面我们已经讲过如何将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二进制文件中。