技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-10.生产环境编译

相关文章：
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-3.接收json数据
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-4.连接mongodb数据库
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-5.跨域并跨域传输数据
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-6.GO语言做通用CRUD接口-1
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-7.GO语言做通用CRUD接口-2
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.管理员及登录注册功能的实现
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-10.生产环境编译

目前可以将server端和admin端看作两个项目，一个后端项目一个前端项目，这两个项目的相互调用就是前后端分离的状态。
但要想让两个项目一起上线，就需要对前端进行生产环境的编译，将重新编译后的admin端放入server端，通过server端显示在页面上。

1.通过npm run build对admin端直接编译

首先确保admin端没有运行，然后对admin端文件进行编译：

cd admin
npm run build

等待几十秒，编译成功：

之后这些静态文件就可以上传至任何服务器中显示。

2.使用serve命令查看编译后的admin端

编译后的静态文件我们就不能通过vue和npm进行访问（npm run serve）。所以我们要使用第三方serve包，方便检查、调试生成的静态文件。
安装serve命令方法：

npm i -g serve

使用serve方法查看静态文件：

此时我们就可以通过5000端口查看生成的静态文件：

没问题，此时接口也可以调用，因为目前所处环境是我们正在运行的本地环境中。如果这段代码放到其他服务器中，就不能完成接口的调用。所以目前生成的静态文件，只能针对其对应的server端进行交互。

3.将生成的admin静态文件放入server端

因为在本地环境中，我们使用的接口地址是本地环境的绝对地址http:localhost:3000/admin/api，但是如果项目上线，接口地址就需要是http://域名/admin/api：

所以，首先修改baseURL接口地址，改为动态切换，分别是之前的开发环境接口地址(localhost)和生产环境接口地址。
（1）利用vue-cli方法定义接口地址变量
定义接口地址环境变量process.env.VUE_APP_API_URL，其中process.env是环境变量，环境变量中定义以VUE_APP开头的变量名，起名为_API_URL。

（2）在admin端新建一个环境变量文件 .env.development（这里存放生产环境下的环境变量）：

将本地接口放入，这个地址变量方便我们在本地调试时连接接口。
（3）如果不在本地环境
如果不在本地环境，在上线的服务器中，环境就是上线服务器，地址就是服务器的IP或解析的域名。
比如说现在我们本地访问server端地址是http://localhost:3000或http://127.0.0.1:3000，那么上线后访问地址就是http://域名或IP。
所以接口地址也应为http://域名或IP/admin/api。
此时process.env.VUE_APP_API_URL是本地环境中的变量，那么非本地环境时我们只需要拼接"/admin/api"即可：

（4）使用vue CLI设置静态文件编译位置
目前，我们使用npm run build对admin端进行静态编译时，生成的文件地址是admin端下方，但是我们每次将静态文件生成到admin端后再复制粘贴到server端是很麻烦的，所以使用vue-cli工具设置一个文件生成地址：
vue-cli配置参考

在admin端新建vue-cli配置文件vue.config.js：

module.exports = {
    // 输出文件夹（配置文件时，将配置好的静态文件直接输出到server端下面的admin文件夹，而不用输出到admin端的dist文件夹中）
    outputDir: __dirname + '/../server/admin',
}

保存配置，再次npm run build编译，静态文件成功生成到了server端下面的admin文件夹：

4.server端显示静态文件

	// 渲染前端渲染静态文件模板
	r.LoadHTMLGlob("admin/*.html") // 添加入口index.html
	r.LoadHTMLFiles("admin/*/*") // 定义资源路径
	r.Static("/static/admin", "./admin/") // 添加资源路径
	r.StaticFile("/ads/", "admin/index.html") // 添加前端接口

这四行代码就可以将vue-cli编译的静态文件在后端渲染出来，前提是路径查找正确。上边定义的路径是根据我的前端编译后文件路径设置的。
其中第三行添加资源路径，设置路由地址必须以"static"开头，否则编译时会报错：

同时，要想显示，就必须再次修改前端vue.config生成代码路径，将static添加上：

这里我的过程就不给大家展示了，大家自行测试一下，如果是按我之前的过程写下来的，上边四行代码就可以完成。如果有疑问可以私信我或者在下方评论，我单独给解答一下。
此时，通过3000端口就可以访问前端搭建的静态页面，且接口都没问题：



到此，go + vue的全栈项目基本流程就完善了。

其他功能如图片上传等大家可以根据手册，并结合之前得nodejs+vue系列文章制作。

本系列文章到此结束，下一系列文章暂定一起学习thinkphp6+vue搭建项目网站（因为目前公司做的是PHP+MYSQL，我以前使用tp5搭建得混乱不堪，正好借此机会整理翻新一下网站）。

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————