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 ~ 前后端数据交互使用 ...
随机推荐
- Egret的Shape
class ShapeTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEvent ...
- timesten 修改最大连接数
修改完/var/Timesten/sys.odbc.ini里面的connections之后 重启TT:ttdaemonadmin -restart 报错:15019: Only the instanc ...
- 06_ for 练习 _ 年利率
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- __http原理__03__content-type 对照表
HTTP content-type Content-Type,内容类型,一般是指网页中存在的Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件, ...
- node版本升级参考
https://www.cnblogs.com/sese/p/9557161.html
- OpLogMergeMessage-OutOfMemoryError-JavaHeapSpace
direct memory size netty or oplog 5.5kw * 20 60G worker/ 26G MaxDirectMemorySize 1/2 tasks per worke ...
- String对象方法属性总结
常用属性: constructor;length;prototype;(不在解释): 常用方法: charAt(index);返回指定位置的字符. concat(stringX);连接字符串. ind ...
- 菜鸟详细解析Cookie注入原理
一.SQL注入原理 我以aspx为例,现在我们来研究下Cookie注入是怎么产生的,在获取URL参数的时候,如果在代码中写成Request[“id”],这样的写法问题就出现了.我先普及下科普知识,在a ...
- PAT甲级1049 Counting Ones【规律】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805430595731456 题意: 给定n,问0~n中,1的总个数 ...
- Python全栈-magedu-2018-笔记2
第二章 - Python 基础语法 基本语法 注释 -- # 标注的文本 数字 整数,不区分long和int 进制0xa.0o10.0b10 bool,2个值True.False 浮点数 1.2.3. ...