go打包vue

vue一般是build成html和js放到WEB上服务器上运行，但是，如果我们需要在客户端上直接运行呢? 用go打包编译成一个可执行文件是个办法。

1.1 先将vue项目打包

npm run build

这个做前端的朋友都熟悉

 

1.2 准备打包工具

CMD打开go项目的根目录，依次下载依赖

go get -u github.com/jteeuwen/go-bindata/...

go get -u github.com/elazarl/go-bindata-assetfs/...

 

1.3 将 dist 文件夹 拷贝到 go项目中

在 go 项目中新建文件夹 vue 用来放置 vue 打包后的的静态资源

将 dist 文件夹拷贝至该目录下

项目目录如下：

|-program   （项目根目录）
    |-main.go   （入口）
    |-vue   （vue 静态资源）
        |-dist
            |-js
            |-css
            |-font
            |-index.html

1.4 打包静态资源

go-bindata-assetfs -o=vue/vue.go -pkg=vue vue/dist/...

-o=vue/vue.go为生成的go文件，在vue目录下的vue.go

-pkg=vue为go文件的包名为vue

打包完成之后会在 vue 目录下生成一个vue.go的go文件

1.5 配置路由和静态资源

 

// InitRouter 初始化路由
func InitRouter() *gin.Engine {
    r = gin.Default()
    index()
    return r
}
// vue静态路由
func index() *gin.Engine {
    //静态文件路径
    const staticPath = `vue/dist/`
    var (
        css = assetfs.AssetFS{
            Asset:     vue.Asset,
            AssetDir:  vue.AssetDir,
            AssetInfo: nil,
            Prefix:    staticPath + "static/css",
            Fallback:  "index.html",
        }
        js = assetfs.AssetFS{
            Asset:     vue.Asset,
            AssetDir:  vue.AssetDir,
            AssetInfo: nil,
            Prefix:    staticPath + "static/js",
            Fallback:  "index.html",
        }
        fonts = assetfs.AssetFS{
            Asset:     vue.Asset,
            AssetDir:  vue.AssetDir,
            AssetInfo: nil,
            Prefix:    staticPath + "static/fonts",
            Fallback:  "index.html",
        }
        img = assetfs.AssetFS{
            Asset:     vue.Asset,
            AssetDir:  vue.AssetDir,
            AssetInfo: nil,
            Prefix:    staticPath + "static/img",
            Fallback:  "index.html",
        }
        fs = assetfs.AssetFS{
            Asset:     vue.Asset,
            AssetDir:  vue.AssetDir,
            AssetInfo: nil,
            Prefix:    staticPath,
            Fallback:  "index.html",
        }
    )
    // 加载静态文件
    r.StaticFS("/favicon.ico", &fs)
    r.StaticFS("static/css", &css)
    r.StaticFS("static/fonts", &fonts)
    r.StaticFS("static/img", &img)
    r.StaticFS("static/js", &js)
    r.GET("/", func(c *gin.Context) {
        //设置响应状态
        c.Writer.WriteHeader(http.StatusOK)
        //载入首页
        indexHTML, _ := vue.Asset(staticPath + "index.html")
        c.Writer.Write(indexHTML)
        //响应HTML类型
        c.Writer.Header().Add("Accept", "text/html")
        //显示刷新
        c.Writer.Flush()
    })
    // 关键点【解决页面刷新404的问题】
    r.NoRoute(func(c *gin.Context) {
        //设置响应状态
        c.Writer.WriteHeader(http.StatusOK)
        //载入首页
        indexHTML, _ := vue.Asset(staticPath + "index.html")
        c.Writer.Write(indexHTML)
        //响应HTML类型
        c.Writer.Header().Add("Accept", "text/html")
        //显示刷新
        c.Writer.Flush()
    })
    return r
}

func main() {
    r := router.InitRouter()
    r.Run("localhost:8888")
}

 

 解决404刷新的方法就是让刷新之后的路由重定向到index.html页面。其实不管是 nginx 还是 tomcat 都是这么解决的，只不过是写法不同罢了。上面r.NoRoute的意思就是找不到这个路由之后要做什么，其实他做的事情应该是和 加载首页 一样的，目的都是进入 index.html页面，而vue会帮你进行路由。