一、环境准备

(1) 服务器环境

window server 2008操作系统 + 2.4GH+ 4G内存的服务器。

 (2) 软件安装

需要安装jdk1.8版本、apache-tomcat 8.0以上、nginx-1.13.12,具体安装过程和环境搭建自己百度。

(3)nginx的代理配置

进入nginx的目录下cong/nginx.conf文件中,添加如下代理:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署

二、前后端打包 

(1)前端打包

宿迁气象服务业务的前端项目目录结构:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_apache_02

具体文件配置:

config/index.js-----》

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_03

build/utils.js(此处不是必须添加的,具体原因见 四(1))---》

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_tomcat_04

static/js/common.js---》

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_05

部署到生成环境时,需要使用下面地址,若是开发环境使用上面地址。(配置这个地址的原因见 四)

打包前台:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_nginx_06

控制台输入上面命令,按enter键

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_nginx_07

若出现上面信息,表示成功。在项目目录下生成如下文件夹:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_08

这样前台打包好了。

(2)后台打包

查看pom.xml中是否是war:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_apache_09

使用maven插件打包:

为保险,先clean清除掉旧的target文件夹内容(双击下图箭头所指):

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_tomcat_10

 

然后package(双击下图箭头所指),

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_11

成功后,在项目的target目录下会有Sqqxfw-web-0.0.1.war包:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_apache_12

这样后台就打包好了。

三、服务器部署

远程连接172.12.2.108服务器:

按住win+R快捷键,打开cmd,输入mstsc命令:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_13

确定输入用户名(Administrator)和密码(Overseas123):

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_14

即可连接到服务器。

关闭tomcat:

进入D:\zshy\apache-tomcat-8.5.20_copy2\apache-tomcat-8.5.20\bin目录下,双击运行shutdown.bat,关闭tomcat。

删除和copy前后台项目:

进入D:\zshy\apache-tomcat-8.5.20_copy2\apache-tomcat-8.5.20\webapps文件夹下删除Sqqxfw-web.war、Sqqxfw-web、Sqqxfw-webui这三个文件和文件夹。

将上面打包的前后端的文件copy到此D:\zshy\apache-tomcat-8.5.20_copy2\apache-tomcat-8.5.20\webapps文件夹下,将Sqqxfw-web-0.0.1.war改名为Sqqxfw-web.war。

启动tomcat和nginx

进入D:\zshy\apache-tomcat-8.5.20_copy2\apache-tomcat-8.5.20\bin目录下,双击运行startup.bat,启动tomcat

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_15

出现如上信息,表示启动成功。

进入nginx所在目录下,双击运行nginx.exe运行文件(启动nginx只是在第一次,除非修改了nginx的配置文件)

         cmd进入nginx目录下:

start nginx  启动nginx
            nginx.exe –s stop 关闭nginx
                          nginx.exe –s reload 重启nginx

即可完成部署。

验证是否部署成功:

                  本地打开浏览器,在地址栏输入: http:// jwxt.gcisoft.com.cn/Sqqxfw-webui

                  出现登录页面,即表示成功了。

四、经验和教训

主要是前端一些静态资源找不到问题。

  1. 如果出现背景图片找不到,可以在build/utils.js文件中,添加publicPath:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_apache_16

    2. 如果在浏览器输入地址,报js/css文件找不到,可以尝试如下解决下:

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_nginx_17

把assetsPublishPath中点去的试试。

 3. 若出现有些样式被覆盖,看看css的引入是否正确,自己添加的css要放在main.js,再element-ui**的css下面。   

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_nginx_18

4. 若在.vue文件中引入图片是相对路径(形如../../../**.png)在部署到服务器上,找不到,可以尝试配置绝对路径,在common.js 中定义全局常量来替代(../../…)

vue java 前后端分离 后端消息通知前端展示 vue前后端分离部署_前后端项目部署_19