前后端分离部署(基于vue)
一、环境准备
(1) 服务器环境
window server 2008操作系统 + 2.4GH+ 4G内存的服务器。
(2) 软件安装
需要安装jdk1.8版本、apache-tomcat 8.0以上、nginx-1.13.12,具体安装过程和环境搭建自己百度。
（3）nginx的代理配置
进入nginx的目录下cong/nginx.conf文件中,添加如下代理:
二、前后端打包
（1）前端打包
宿迁气象服务业务的前端项目目录结构:
具体文件配置:
config/index.js-----》
build/utils.js（此处不是必须添加的，具体原因见 四（1））---》
static/js/common.js---》
部署到生成环境时，需要使用下面地址，若是开发环境使用上面地址。(配置这个地址的原因见 四)
打包前台:
控制台输入上面命令，按enter键
若出现上面信息，表示成功。在项目目录下生成如下文件夹:
这样前台打包好了。
（2）后台打包
查看pom.xml中是否是war:
使用maven插件打包:
为保险，先clean清除掉旧的target文件夹内容（双击下图箭头所指）:
然后package（双击下图箭头所指）,
这样后台就打包好了。
三、服务器部署
远程连接172.12.2.108服务器:
按住win+R快捷键，打开cmd，输入mstsc命令:
确定输入用户名（Administrator）和密码(Overseas123):
即可连接到服务器。
关闭tomcat：
进入D:zshyapache-tomcat-8.5.20_copy2apache-tomcat-8.5.20in目录下，双击运行shutdown.bat，关闭tomcat。
删除和copy前后台项目:
启动tomcat和nginx
进入D:zshyapache-tomcat-8.5.20_copy2apache-tomcat-8.5.20in目录下，双击运行startup.bat，启动tomcat。
出现如上信息，表示启动成功。
进入nginx所在目录下，双击运行nginx.exe运行文件（启动nginx只是在第一次，除非修改了nginx的配置文件）
cmd进入nginx目录下:
start nginx 启动nginx
nginx.exe –s stop 关闭nginx
nginx.exe –s reload 重启nginx
即可完成部署。
验证是否部署成功:
出现登录页面，即表示成功了。
四、经验和教训
主要是前端一些静态资源找不到问题。
- 如果出现背景图片找不到，可以在build/utils.js文件中，添加publicPath：
2. 如果在浏览器输入地址，报js/css文件找不到，可以尝试如下解决下:
把assetsPublishPath中点去的试试。
3. 若出现有些样式被覆盖，看看css的引入是否正确,自己添加的css要放在main.js，再element-ui**的css下面。
4. 若在.vue文件中引入图片是相对路径（形如../../../**.png）在部署到服务器上，找不到，可以尝试配置绝对路径，在common.js 中定义全局常量来替代（../../…）
