一、引言

  由于本地是采用vue+spring boot实现的前后端分离项目,本机启动的时候先启动后场服务,再单独启动vue工程,然后可以实现全流程贯穿,但是我们要部署到服务器上的时候,一般都是打一个jar包到服务器上跑,那前端的Vue页面就不好启动来展示了。

  传统的前端项目和后端服务代码整合起来,可以打成war包丢到tomcat上,在tomcat去跑整个工程;不过我们既然已经采用了前后端分离的策略,部署上再实现分开部署的话,那岂不是美滋滋,改动前端或者改动后端都可以单独部署,这样更方便我们项目的管理。

  前后端分开部署的原理主要就是利用了nginx实现反向代理以及静态资源文件管理的功能,将前端请求交给nginx,让nginx去跨域,再调用后端的代码,这样前后端可以分开部署在两台机器上,也可以是部署在一台机器上不同端口号的情况。

二、工程结构简介

三、部署前准备

1、vue打包成静态文件

##1、把vue打包成静态文件目录
npm run build

  执行成功后,可以看到工程里面多了一个dist文件夹:

2、修改静态文件的访问路径

四、上传静态文件目录和后场工程jar包

  上传工具有很多种,这里就不图解了,上传后的文件目录自定义:

五、配置nginx的反向代理

##1、查看nginx的配置文件【注意是nginx安装后的conf目录】
vim /usr/local/nginx/conf/nginx.conf

  配置好了以后,重启nginx

##1、cd到nginx安装目录下的sbin目录
cd /usr/local/nginx/sbin/ ##2、重启nginx
./nginx –s reload

六、成果展示

VUE开发(二)nginx配合vue来实现前后端分离部署的更多相关文章

  1. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  2. vue 项目中使用mock假数据实现前后端分离

    也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...

  3. nginx配置反向代理解决前后端分离跨域问题

    摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...

  4. 一个实际的案例介绍Spring Boot + Vue 前后端分离

    介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...

  5. Flask & Vue 构建前后端分离的应用

    Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...

  6. vue+rest-framework前后端分离整合

    一.vue部分 二.django路由配置 (1)项目urls.py修改如下: from django.conf.urls import url, include urlpatterns = [ # p ...

  7. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  8. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  9. 谷粒商城为什么要选择后天管理用vue前后端分离,而商城页面选择Thymeleaf类?

    1.最初使用jsp开发web项目 还记得刚学习Java的时候,自己开发一个web项目,那时候前后端分离还不流行,为了在页面中显示动态数据,最终的形式也就是以动态网页响应用户,Java一种技术jsp,J ...

随机推荐

  1. MAC安装Navicat Premiun12

    链接地址:https://blog.csdn.net/wenyicodedog/article/details/97970154

  2. virt-install 安装系统和启动虚机

    安装系统: virt-install -n x1 -r --vcpus --disk path=/home/wangjq/x1.qcow2,size=,format=qcow2,bus=virtio, ...

  3. CentOS 7/8上部署Ceph

    Ceph是一个分布式的存储系统,可以在统一的系统中提供唯一的对象.块和文件存储,Ceph的大致组件如下: 1. Ceph监视器(ceph-mon):用来维护集群状态的映射,包括监视器映射,管理器映射, ...

  4. mysql再回首

    Mysql与Oracle的区别 1.实例区别 Mysql是一个轻量型数据库,开源免费.Oracle是收费的而且价格非常高. Mysql一个实例可以操作多个库,而Oracle一个实例只能对应一个库. M ...

  5. 焦大:seo如何快速理解谷歌PR的计算奥秘

    http://www.wocaoseo.com/thread-248-1-1.html 前不久看到一个搞笑的说法,有人问谷歌PR的计算是PR值=0.15+0.85*(A网页传递值+B网页传递值--), ...

  6. AtCoder Beginner Contest 177 题解

    AtCoder Beginner Contest 177 题解 目录 AtCoder Beginner Contest 177 题解 A - Don't be late B - Substring C ...

  7. 超全Python IDE武器库大总结,优缺点一目了然!

    本文介绍了多个 Python IDE,并评价其优缺点.读者可以参考此文列举的 Python IDE 列表,选择适合自己的编辑器. 写 Python 代码最好的方式莫过于使用集成开发环境(IDE)了.它 ...

  8. 今天来学习一下MySQl的 临时表,变量,行转列,预处理的一些相关技术的使用!

    先来简单了解一下MySQL数据库有意思的简介 MySQL这个名字,起源不是很明确.一个比较有影响的说法是,基本指南和大量的库和工具带有前缀“my”已经有10年以上, 而且不管怎样,MySQL AB创始 ...

  9. asp image

    @Url.Content("~/Content/images/myimage.png") <img src="~/Content/images/myimage.pn ...

  10. 1008 Elevator (20 分)(模拟)

    The highest building in our city has only one elevator. A request list is made up with N positive nu ...