VUE开发(二)nginx配合vue来实现前后端分离部署
一、引言
由于本地是采用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来实现前后端分离部署的更多相关文章
- Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- vue 项目中使用mock假数据实现前后端分离
也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...
- nginx配置反向代理解决前后端分离跨域问题
摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- vue+rest-framework前后端分离整合
一.vue部分 二.django路由配置 (1)项目urls.py修改如下: from django.conf.urls import url, include urlpatterns = [ # p ...
- 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 谷粒商城为什么要选择后天管理用vue前后端分离,而商城页面选择Thymeleaf类?
1.最初使用jsp开发web项目 还记得刚学习Java的时候,自己开发一个web项目,那时候前后端分离还不流行,为了在页面中显示动态数据,最终的形式也就是以动态网页响应用户,Java一种技术jsp,J ...
随机推荐
- MAC安装Navicat Premiun12
链接地址:https://blog.csdn.net/wenyicodedog/article/details/97970154
- virt-install 安装系统和启动虚机
安装系统: virt-install -n x1 -r --vcpus --disk path=/home/wangjq/x1.qcow2,size=,format=qcow2,bus=virtio, ...
- CentOS 7/8上部署Ceph
Ceph是一个分布式的存储系统,可以在统一的系统中提供唯一的对象.块和文件存储,Ceph的大致组件如下: 1. Ceph监视器(ceph-mon):用来维护集群状态的映射,包括监视器映射,管理器映射, ...
- mysql再回首
Mysql与Oracle的区别 1.实例区别 Mysql是一个轻量型数据库,开源免费.Oracle是收费的而且价格非常高. Mysql一个实例可以操作多个库,而Oracle一个实例只能对应一个库. M ...
- 焦大:seo如何快速理解谷歌PR的计算奥秘
http://www.wocaoseo.com/thread-248-1-1.html 前不久看到一个搞笑的说法,有人问谷歌PR的计算是PR值=0.15+0.85*(A网页传递值+B网页传递值--), ...
- AtCoder Beginner Contest 177 题解
AtCoder Beginner Contest 177 题解 目录 AtCoder Beginner Contest 177 题解 A - Don't be late B - Substring C ...
- 超全Python IDE武器库大总结,优缺点一目了然!
本文介绍了多个 Python IDE,并评价其优缺点.读者可以参考此文列举的 Python IDE 列表,选择适合自己的编辑器. 写 Python 代码最好的方式莫过于使用集成开发环境(IDE)了.它 ...
- 今天来学习一下MySQl的 临时表,变量,行转列,预处理的一些相关技术的使用!
先来简单了解一下MySQL数据库有意思的简介 MySQL这个名字,起源不是很明确.一个比较有影响的说法是,基本指南和大量的库和工具带有前缀“my”已经有10年以上, 而且不管怎样,MySQL AB创始 ...
- asp image
@Url.Content("~/Content/images/myimage.png") <img src="~/Content/images/myimage.pn ...
- 1008 Elevator (20 分)(模拟)
The highest building in our city has only one elevator. A request list is made up with N positive nu ...