前后端分离部署(基于vue)

xiaoxiao2023-11-22 35

一、环境准备 (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（双击下图箭头所指）,

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

这样后台就打包好了。

三、服务器部署远程连接172.12.2.108服务器:

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

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

即可连接到服务器。

关闭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。

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

进入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

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

四、经验和教训主要是前端一些静态资源找不到问题。

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

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

把assetsPublishPath中点去的试试。

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

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

一、环境准备

(1) 服务器环境