Golang编译打包Vue项目到二进制包
项目目录结构:
```
1. ├── config
2. ├── controllers
3. ├── templates
4. │ ├── public
5. │ ├── src
6. │ ├── node_modules
7. ├── services
8. ├── routers
9. ├── 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二进制文件中。