go打包vue静态资源 & 解决页面刷新404问题【赵烧鸡腿饭~】

go打包vue静态资源 & 解决页面刷新404问题【赵烧鸡腿饭~】

前言

最近在做一个go + vue的项目，快做完的时候告诉我要把vue和go一起打包，这个问题一下子就难道我了啊，以前都是把vue放到nginx中去跑，打包到go还没玩过，毕竟我也是个go的菜鸟。好吧，开搞，查资料……测试……无线循环，终于搞好了打包的问题，结果页面无法进行刷新，点击浏览器的刷新按钮页面直接404。无奈，继续找资料，但是这方面的资料太少了，只找到的在tomcat中怎么解决这个问题，go里面几乎没有。咋办呢，自己搞呗，功夫不负瞎鸡巴搞，瞎猫碰到死耗子居然搞成功了，而且方法出乎意料，哈哈哈！！！

正文

1. 打包

1.1 先将vue项目打包

直接
npm run build
基本上无需修改配置。
此处不再赘述，因为很简单。

1.2 准备打包工具

终端打开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<