前言


常用的部署方式有两种:

1.是把生成好的静态页面放到spring boot的static目录下,与打包后的spring boot项目一起发布,当spring boot运行起来后,自然而然就能访问到静态页面文件了。

这种方法比较简单,适用于非常小型的系统。优点是:不需要复杂的配置。而缺点也很明显:需要两者一同发布。我在这里就不做赘述了。

2.是通过http服务器发布,本文以nginx为例,重点介绍这种方式。

一、生成静态页面


运行npm run build

生成的页面文件在dist目录下:

二、配置nginx


windows系统下载nginx:http://nginx.org/en/download.html

下载完解压后,找到conf/nginx.conf文件,并修改:

worker_processes  1;

events {
worker_connections 1024;
} http {
include mime.types;
server {
listen 80;
server_name localhost; # 静态文件夹路径
root 你的路径;
index index.html index.htm; # 后端配置
location /api/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       # 后端url
proxy_pass http://localhost:18080/;
}
}
}

  

其中,root项目是配置静态网页文件所在的路径,配置成你自己的目录。

location是配置spring boot项目跨域,这里我配置了当匹配到有“/api/”开头的请求,就会转到spring boot的项目中处理。

运行效果如下图所示:

访问nginx的地址,就能访问到之前生成的静态页面和spring boot的后端。

而这就是前后端分离开发的魅力所在。

返回目录

git代码地址:https://github.com/carter659/spring-boot-vue-element.git

如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

spring boot + vue + element-ui全栈开发入门——项目部署的更多相关文章

  1. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  2. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  3. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  4. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  5. spring boot + vue + element-ui全栈开发入门——spring boot后端开发

    前言 本文讲解作为后端的spring boot项目开发流程,如果您还不会配置spring boot环境,就请点击<玩转spring boot——快速开始>,如果您对spring boot还 ...

  6. koa+mysql+vue+socket.io全栈开发之数据访问篇

    后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...

  7. 实习模块vue+java小型全栈开发(三)

    实习模块vue+java小型全栈开发(三) --dx 背景 首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传. 今天是真正 ...

  8. spring boot + vue + element-ui全栈开发入门——前后端整合开发

    一.配置 思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: { '/ap ...

  9. 自搭的一个系统框架,使用Spring boot+Vue+Element

    基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性:    ~ 数据库访问使用spring data jpa+alibaba druid    ~ 前后端数据交互使用 ...

随机推荐

  1. 【BZOJ1103】大都市 解题报告

    题目传送门 打算5分钟写完题解 题目大意 有一棵n个点的有根树, 初始时每条边均为红色,有两种操作: 把某条边染为蓝色 统计根到某一点路径上的红边数量 思路 用\(a_i\)表示根到点i路径上的红边数 ...

  2. 基于.net的微服务架构下的开发测试环境运维实践

    眼下,做互联网应用,最火的架构是微服务,最热的研发管理就是DevOps, 没有之一.微服务.DevOps已经被大量应用,它们已经像传说中的那样,可以无所不能.特来电云平台,通过近两年多的实践,发现完全 ...

  3. 置信区间-显著性-P-值

    1.置信区间:误差范围(区间)在统计概率中就叫做置信区间:简单来说置信区间就是误差范围 我们用中括号[a,b]表示样本估计总体平均值的误差范围的区间,由于a和b的确切数值取决于你希望自己对于“该区间包 ...

  4. Java虚拟机一 运行时数据区(栈、堆、方法区等)

    Java虚拟机的内存管理主要分两点:内存分配以及内存回收.· 一.内存分配图: 注: 所占区域的大小与实际的内存大小比例并无直接关系. 解读: 1.如图,分成两种颜色的内存区域,其中蓝色的是线程隔离的 ...

  5. [LeetCode] Random Pick with Weight 根据权重随机取点

    Given an array w of positive integers, where w[i] describes the weight of index i, write a function  ...

  6. java控制台连接数据库

    分四个步骤 *1.加载驱动程序*2.数据库连接字符串*3.数据库登录名和密码*4.最后关闭. 代码 package LinkMySQL; import java.sql.Connection; imp ...

  7. SSM 记录

    前言:本过程从0开始,先是导入最核心的jar包,然后随着ssm中的功能实现,打包===>启动===>报错,一步步解决问题,增加额外的必须的jar包来熟悉ssm 1.导包(核心包) myba ...

  8. python2和python3共存时,设置默认python为python3

    sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternati ...

  9. Centos7双网卡绑定配置 bonding

    bonding的七种工作模式: bonding技术提供了七种工作模式,在使用的时候需要指定,每种有各自的优缺点,我们使用的是 mode=4 balance-rr (mode=0) 默认, 有高可用 ( ...

  10. 神贴真开眼界:为什么很多人倡导重视能力和素质,但同时对学历有严格要求?——代表了上一场比赛的输赢,招聘成本很重要。如果上一场游戏失败了,尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已,但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good

    对于软件工程师职位,没学历没关系,如果真觉得自己才高八斗,请在简历里附上 github项目链接或者 appstore/google play上你的作品.如果学历比别人低,那么想必是把时间和精力用在了其 ...