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

golang gin vue 22-11-11 01:13 46  

项目目录结构: ``` 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二进制文件中。

22-11-11 01:34

好评,试试