前后端分离部署(基于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(双击下图箭头所指),

成功后,在项目的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。

启动tomcatnginx

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

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

四、经验和教训

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

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

        

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

      

     把assetsPublishPath中点去的试试。

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

 

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

猜你喜欢

转载自blog.csdn.net/weixin_40364885/article/details/81146494