spring boot + vue + element-ui全栈开发入门——项目部署
前言
常用的部署方式有两种:
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全栈开发入门——项目部署的更多相关文章
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门——spring boot后端开发
前言 本文讲解作为后端的spring boot项目开发流程,如果您还不会配置spring boot环境,就请点击<玩转spring boot——快速开始>,如果您对spring boot还 ...
- koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
- 实习模块vue+java小型全栈开发(三)
实习模块vue+java小型全栈开发(三) --dx 背景 首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传. 今天是真正 ...
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
一.配置 思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: { '/ap ...
- 自搭的一个系统框架,使用Spring boot+Vue+Element
基于:jdk1.8.spring boot2.1.3.vue-cli3.4.1 特性: ~ 数据库访问使用spring data jpa+alibaba druid ~ 前后端数据交互使用 ...
随机推荐
- 【BZOJ1103】大都市 解题报告
题目传送门 打算5分钟写完题解 题目大意 有一棵n个点的有根树, 初始时每条边均为红色,有两种操作: 把某条边染为蓝色 统计根到某一点路径上的红边数量 思路 用\(a_i\)表示根到点i路径上的红边数 ...
- 基于.net的微服务架构下的开发测试环境运维实践
眼下,做互联网应用,最火的架构是微服务,最热的研发管理就是DevOps, 没有之一.微服务.DevOps已经被大量应用,它们已经像传说中的那样,可以无所不能.特来电云平台,通过近两年多的实践,发现完全 ...
- 置信区间-显著性-P-值
1.置信区间:误差范围(区间)在统计概率中就叫做置信区间:简单来说置信区间就是误差范围 我们用中括号[a,b]表示样本估计总体平均值的误差范围的区间,由于a和b的确切数值取决于你希望自己对于“该区间包 ...
- Java虚拟机一 运行时数据区(栈、堆、方法区等)
Java虚拟机的内存管理主要分两点:内存分配以及内存回收.· 一.内存分配图: 注: 所占区域的大小与实际的内存大小比例并无直接关系. 解读: 1.如图,分成两种颜色的内存区域,其中蓝色的是线程隔离的 ...
- [LeetCode] Random Pick with Weight 根据权重随机取点
Given an array w of positive integers, where w[i] describes the weight of index i, write a function ...
- java控制台连接数据库
分四个步骤 *1.加载驱动程序*2.数据库连接字符串*3.数据库登录名和密码*4.最后关闭. 代码 package LinkMySQL; import java.sql.Connection; imp ...
- SSM 记录
前言:本过程从0开始,先是导入最核心的jar包,然后随着ssm中的功能实现,打包===>启动===>报错,一步步解决问题,增加额外的必须的jar包来熟悉ssm 1.导包(核心包) myba ...
- python2和python3共存时,设置默认python为python3
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternati ...
- Centos7双网卡绑定配置 bonding
bonding的七种工作模式: bonding技术提供了七种工作模式,在使用的时候需要指定,每种有各自的优缺点,我们使用的是 mode=4 balance-rr (mode=0) 默认, 有高可用 ( ...
- 神贴真开眼界:为什么很多人倡导重视能力和素质,但同时对学历有严格要求?——代表了上一场比赛的输赢,招聘成本很重要。如果上一场游戏失败了,尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已,但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good
对于软件工程师职位,没学历没关系,如果真觉得自己才高八斗,请在简历里附上 github项目链接或者 appstore/google play上你的作品.如果学历比别人低,那么想必是把时间和精力用在了其 ...