宝塔面板部署Vue+Gin项目（吐血整理，各种踩坑）

前言        

        最近做了一个Vue+gin的小项目，自己写的，纯纯是为了练习自己的gin框架，顺带着入门前端的Vue开发（发现还真是好用啊！属于是用完真香）

        然后做完后，就想着部署在自己的服务器上，本着人有我用的原则，直接一通找，发现几乎很少有部署VUE+Go的项目，基本上要不就是Vue或者单独的go项目，或者就是Vue+java。于是自己也是陷入了摸索的境界。

前期部署（各种试错）

       分开部署（几乎崩溃）

         一开始，自己想着先看go项目（后面我也用gin框架代指这个项目）部署，因为关于宝塔部署go项目还是有，好！然后自己花了一点时间，部署了gin框架在linux服务器8081端口上。然后再部署Vue项目，这里因为是小白，基本上也是参考的项目，然后自己想着再去找nginx反向代理，基本上通信上的问题就finish，但是不知道为啥一直实现不了，前端页面可以加载，但是一直不能调用后端的gin框架进行服务。这个地方折腾了3个小时（包括重新部署和重新安装nginx），反正就是不成功。。。（如果有大佬看到了这个帖子，呜呜呜希望给我一点指导）

        注：有用docker容器部署的教程，但是因为自己想原生态部署，不太想用容器，所以没尝试，后面有时间再用docker部署一下，看看是否更好。（希望不是一个接一个踩坑）

        合并部署（成功曙光）

        后面思路打开了，想着分开部署不行，我就选择合并部署。因为自己之前和别人合作过一个项目，他当时就是打包的react。于是我把前端的Vue项目打包。

npm run build

打包后，在vscode中出现下面的dist文件夹，那么就说明打包成功！

然后我们将这个dist文件夹放置在gin的文件夹下。如下图所示。

然后在router文件夹下的router.go也就是gin框架下的路由层下我们引入前端加载的代码。后面的后端服务的api接口一类的，我就省略啦。

	r := gin.Default()

	//加载静态资源

	r.Use(static.Serve("/", static.LocalFile("dist", true)))
	r.NoRoute(func(c *gin.Context) {
		accept := c.Request.Header.Get("Accept")
		flag := strings.Contains(accept, "text/html")
		if flag {
			content, err := ioutil.ReadFile("dist/index.html")
			if (err) != nil {
				c.Writer.WriteHeader(404)
				c.Writer.WriteString("Not Found")
				return
			}
			c.Writer.WriteHeader(200)
			c.Writer.Header().Add("Accept", "text/html")
			c.Writer.Write((content))
			c.Writer.Flush()
		}
	})

然后本地调试，运行成功。但是这是在windows环境下运行的。我们需要在linux环境下，我们打开命令行，输入一下代码，生成在linux运行的main文件。

set GOOS=linux
go build -o main
set GOOS=windows

然后我们便把资源加载到宝塔面板上去。宝塔可以直接上传文件，不需要第三方工具。我们上传config因为这个里面有app.yml配置文件，asset我放置图片的地方，dist就是Vue打包后的文件，最后就是main。全部在同一个文件夹下。

然后点击宝塔左边的网站，点击go项目，然后点击添加go项目，就会出现下图的信息。

这一些信息我们就按实际填写就是，执行文件就是你放置的main。名称自己看，端口写你实际端口就行，还需要记得放行！然后点击提交就行。对，就这么简单，真就这样，然后就可以访问了。

后话

        这是自己第一次部署go的项目，学了一段时间了，几乎都是在本地跑。第一次运行上服务器。哈哈哈哈虽然经历了挫折，但是还是比较成功的。

        想看看评论区有没有大神指导我前后端分开部署，还有nginx为啥一直反向代理不到，呜呜呜。