一、引言

  由于本地是采用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. latex:公式的序号

    1.排序单位 在文类book或report中,行间公式是以章为排序单位的,即每一新章节开始,公式序号计数器equation就被清零.比如第1章第3个公式的序号是(1.3),第2章第1个公式的序号是(2 ...

  2. ISO8601

    日期和时间的组合表示法 合并表示时,要在时间前面加一大写字母T,如要表示东八区时间2004年5月3日下午5点30分8秒,可以写成2004-05-03T17:30:08+08:00或20040503T1 ...

  3. 手写Promise简易版

    话不多说,直接上代码 通过ES5的模块化封装,向外暴露一个属性 (function(window){ const PENDING = 'pending'; const RESOLVED = 'fulf ...

  4. vmd与ovito的对比

    1.minimize后,lammps生成的data文件 2.pdb:

  5. Chrome 发一个请求,后台Controller 执行2次

    chrome 每发一次请求,都会执行2次controller,换成其他浏览器就不会. 最后发现是这个插件导致的,果断删除.

  6. laravel Application实例化后两个方法

    laravel容器初始化registerBaseServiceProviders方法 上篇讲解了laravel容器的基本使用和原理,这篇继续Application构造方法中的registerBaseS ...

  7. layui 表单验证汇总

    1 表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required 必填项phone 手机号email 邮箱date 日期url 链接identity 身份证number 数 ...

  8. java基础语法(一)

    一.注释: 行内注释 //这是行内注释 多行注释 /* *这是多行注释 */ 文档注释 /** *这是文档注释 */ 二.标识符 标识符也就是我们所说的关键字 三.数据类型 1.基本数据类型 ​ 数据 ...

  9. Google Code Jam 2020 Round1B Expogo

    题意 你初始位于\((0,0)\),然后你想要到\((x,y)\)去,第\(i\)步的步长是\(2^{i-1}\),要求用最少的步数走到\((x,y)\). 解题思路 首先可以推出,走\(i\)步可以 ...

  10. [BUUOJ记录] [ACTF2020 新生赛]BackupFile、Exec

    两道题都比较简单,所以放到一块记下来吧,不是水博客,师傅们轻点打 BackupFile 题目提示“Try to find out source file!”,访问备份文件/index.php.bak获 ...