你不知道的SpringBoot与Vue部署解决方案
前言
前段时间公司外网部署的演示环境全部转到内网环境中去，所有对外演示的环境都需要申请外网映射才能访问某个服务。我用一个外网地址 www.a.com 映射到一个内网地址 http://ip:port ，然后在这个地址 http://ip:port 用 nginx 做代理转发到各个组的项目 http://ipn:portn 上去，其中也遇到一些静态资源 404，主要是是解决这个 404 问题。
最近又做了一个项目，考虑到用户的体验，减少部署的复杂性，我想了一个办法用 SpringBoot 做 web 服务器映射前端资源为 web 资源 。
条件允许或者对性能要求比较高，推荐是前后端分离部署，nginx 做 web 服务器，后端只提供接口服务
以前部署的项目 A 外网访问地址是 http://ip1:8080 ，外网映射后只能访问 http://ip/app1 ，以前项目 B 外网访问地址是 http://ip1:8081 ，项目访问地址是 http://ip/app2 。这也算是一个不大不小的变动，但是切换之后遇到的第一个问题就是静态资源转发导致 404 。
比如以前项目 A 访问地址是 http://ip1:8080 它是没有上下文的。
而现在 A 的访问地址为 http://ip/app1 ,有一个上下文 app1 在这里，导致有一些资源 404。
比如说：原来 http://ip1:8080 请求到了 index.html 资源，现在只能 http://ip/app1 请求到 index.html。
<!-- index.html --> <!-- 原来部署环境写法 --> <link href="/index.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
以前访问 index.css 地址是 http://ip1:8080/index.css ，但是现在变成访问了 http://ip/index.css 导致 404，实际 index.css 地址为 http://ip/app1/index.css
前端使用 vue 编写，html 中的静态资源路径可以很好解决，修改 webpack 打包即可。
<!-- 原来部署环境写法 --> <link href="/index.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"> <!-- 写成相对路径 --> <link href="./index.css" rel="external nofollow" rel="stylesheet"> <!-- 结合 webpack 打包时进行路径补充 --> <link href="<%= BASE_URL %>index.css" rel="external nofollow" rel="stylesheet">
但是项目中有一些组件的请求没有办法统一处理，只能改代码。但我不想动代码，webpack 打包都不想动，基于这些需求想了一个办法来解决。
本文内容
- Nginx 部署 vue 项目，怎么能友好处理静态资源的丢失
- SpringBoot 提供 web 服务器的功能映射 vue 项目为 web 资源，并处理 vue 路由转发 index.html 问题。
Nginx 部署 Vue 项目
server {
listen 8087;
# 它的作用是不重定向地址，比如浏览器输入 /app1 访问，也可以访问到 /app1/ ,而浏览器地址是不改变的 /app1 。没办法，强迫症
location / {
try_files $uri $uri/;
}
root /Users/zhangpanqin/staic/;
location ~ /(.*)/ {
index index.html /index.html;
try_files $uri $uri/ /$1/index.html;
}
}
/Users/zhangpanqin/staic/ 放部署的项目，比如 app 的项目资源放到 /Users/zhangpanqin/staic/app 下。 访问地址为 http://ip/8087/app
<!DOCTYPE html> <html lang="en"> <head> <!-- 也可以改成类似的地址 BASE_URL 等于 vue.config.js 配置的 publicPath--> <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" > <!-- 部署之后，访问不到 index.css --> <link href="/index.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"> </head> </html>
为了可以在浏览器输入 vue 的路由 /app/blog 也可以访问页面，需要添加 vue-router 中的 base 属性。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
{
path: '/blog',
name: 'Blog',
component: () => import('@/views/Blog.vue'),
},
{
// 匹配不到路由的时候跳转到这里
path: '*',
name: 'Error404',
component: () => import('@/views/Error404.vue'),
}
];
const router = new VueRouter({
// 主要是修改这里，可以根据 vue mode 环境来取值。
// https://cli.vuejs.org/zh/guide/mode-and-env.html
// https://router.vuejs.org/zh/api/#base
base: process.env.VUE_APP_DEPLOY_PATH,
mode: 'history',
routes,
});
export default router;
http://localhost:8087/app/index.css 为 css 的真实地址。所以想办法为这些不以 /app 开头的资源加上 /app 就可以了，想了想只有 cookie 能做到。
x_vue_path 记录每个项目的路径，然后静态资源去这个路径下寻找， $cookie_x_vue_path/$uri
下面这个配置使用了 try_files 内部重定向资源，是不会在浏览器端发生重定向的。
# gzip ，缓存 和 epoll 优化的都没写
server {
listen 8087;
# 它的作用是不重定向地址，比如浏览器输入 /app1 访问，也可以访问到 /app1/ ,而浏览器地址是不改变的 /app1 。没办法，强迫症
location / {
try_files $uri $uri/;
}
root /Users/zhangpanqin/staic/;
# (.*) 匹配是哪个项目，比如说 app1 app2 等
location ~ /(.*)/.*/ {
index index.html /index.html;
add_header Set-Cookie "x_vue_path=/$1;path=/;";
# /Users/zhangpanqin/staic/+/$1/index.html 可以到每个项目下 index.html
try_files $uri $uri/ /$1/index.html @404router;
}
# 查找静态资源，也可以在这里添加缓存。
location ~ (.css|js)$ {
try_files $uri $cookie_x_vue_path/$uri @404router;
}
location @404router {
return 404;
}
}
下面这个是重定向的配置
server {
listen 8087;
root /Users/zhangpanqin/staic/;
location ~ /(.*)/.*/? {
index index.html /index.html;
add_header Set-Cookie "x_vue_path=/$1;path=/;";
try_files $uri $uri/ /$1/index.html @404router;
}
location ~ (.css|js)$ {
# 匹配到 /app/index.css 的资源，直接访问
rewrite ^($cookie_x_vue_path)/.* $uri break;
# 访问的资源 /index.css 302 临时重定向到 /app/index.css
rewrite (.css|js)$ $cookie_x_vue_path$uri redirect;
}
location @404router {
return 404;
}
}
根据这个思路就可以把所有的资源进行转发了，不用改业务代码，只需给 vue-router 加上一个 base 基础路由。
SpringBoot 部署 Vue 项目
Nginx 走通了，SpringBoot 依葫芦画瓢就行了，还是 java 写的舒服，能 debug，哈哈。
SpringBoot 映射静态资源
@Configuration
public class VueWebConfig implements WebMvcConfigurer {
/**
* 映射的静态资源路径
* file:./static/ 路径是相对于 user.dir 路径，jar 包同级目录下的 static
*/
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {"file:./static/", "classpath:/META-INF/resources/",
"classpath:/resources/", "classpath:/static/", "classpath:/public/"};
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 添加静态资源缓存
CacheControl cacheControl = CacheControl.maxAge(5, TimeUnit.HOURS).cachePublic();
registry.addResourceHandler("/**").addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS).setCacheControl(cacheControl);
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
// 配置要拦截的资源,主要用于 添加 cookie
registry.addInterceptor(new VueCookieInterceptor()).addPathPatterns("/test/**");
}
// vue 路由转发使用的，也做 接口请求找不到的
@Bean
public VueErrorController vueErrorController() {
return new VueErrorController(new DefaultErrorAttributes());
}
}
项目静态资源路径添加 cookie
public class VueCookieInterceptor implements HandlerInterceptor {
public static final String VUE_HTML_COOKIE_NAME = "x_vue_path";
public static final String VUE_HTML_COOKIE_VALUE = "/test";
/**
* 配置请求资源路径 /test 下全部加上 cookie
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
final Cookie cookieByName = getCookieByName(request, VUE_HTML_COOKIE_NAME);
if (Objects.isNull(cookieByName)) {
final Cookie cookie = new Cookie(VUE_HTML_COOKIE_NAME, VUE_HTML_COOKIE_VALUE);
// 项目下的 url 都带能带上
cookie.setPath("/");
cookie.setHttpOnly(true);
response.addCookie(cookie);
}
return true;
}
public static Cookie getCookieByName(HttpServletRequest httpServletRequest, String cookieName) {
final Cookie[] cookies = httpServletRequest.getCookies();
if (Objects.isNull(cookieName) || Objects.isNull(cookies)) {
return null;
}
for (Cookie cookie : cookies) {
final String name = cookie.getName();
if (Objects.equals(cookieName, name)) {
return cookie;
}
}
return null;
}
}
请求出现错误做资源的转发
访问错误的跳转要分清楚 接口请求和静态资源的请求，通过 accept 可以判断。
@RequestMapping("/error")
public class VueErrorController extends AbstractErrorController {
private static final String ONLINE_SAIL = VUE_HTML_COOKIE_NAME;
private static final String ERROR_BEFORE_PATH = "javax.servlet.error.request_uri";
public VueErrorController(DefaultErrorAttributes defaultErrorAttributes) {
super(defaultErrorAttributes);
}
@Override
public String getErrorPath() {
return "/error";
}
@RequestMapping
public ModelAndView errorHtml(HttpServletRequest httpServletRequest, HttpServletResponse response, @CookieValue(name = ONLINE_SAIL, required = false, defaultValue = "") String cookie) {
final Object attribute = httpServletRequest.getAttribute(ERROR_BEFORE_PATH);
if (cookie.length() > 0 && Objects.nonNull(attribute)) {
response.setStatus(HttpStatus.OK.value());
String requestURI = attribute.toString();
// 访问的路径没有以 vue 部署的路径结尾，补充上路径转发去访问
if (!requestURI.startsWith(cookie)) {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setStatus(HttpStatus.OK);
// 静态资源不想转发，重定向的话，修改为 redirect
String viewName = "forward:" + cookie + requestURI;
modelAndView.setViewName(viewName);
return modelAndView;
}
}
ModelAndView modelAndView = new ModelAndView();
modelAndView.setStatus(HttpStatus.OK);
modelAndView.setViewName("forward:/test/index.html");
return modelAndView;
}
// 处理请求头为 accept 为 application/json 的请求，就是接口请求返回json 数据
@RequestMapping(produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
HttpStatus status = getStatus(request);
if (status == HttpStatus.NO_CONTENT) {
return new ResponseEntity<>(status);
}
final Map<String, Object> errorAttributes = getErrorAttributes(request, true);
return new ResponseEntity<>(errorAttributes, status);
}
首页跳转
@Controller
public class IndexController {
@RequestMapping(value = {"/test", "/test"})
public String index() {
return "forward:/test/index.html";
}
}
本文由 张攀钦的博客 www.mflyyou.cn/ 创作。 可自由转载、引用，但需署名作者且注明文章出处。
到此这篇关于你不知道的SpringBoot与Vue部署解决方案的文章就介绍到这了,更多相关SpringBoot与Vue部署内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
前言 给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的,我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统,在开发一个相似的后台就会轻松很多.不过前面的系统的后端是使用 node 完成的,对于我们 Java 开发者来说,用不到.我学习的是 ElementUI 的使用,就足够了,然后后端服务就全部可以自己使用 SpringBoot 来完成 最近貌似 Vue3 正式版也发布了,正好有空看可以去看一看 提示:以下是本篇
-
springboot+vue部署按照及运行方法
1 环境部署 1.1 jdk-8u111-windows-x64 环境变量 JAVA_HOME:C:\Program Files\Java\jdk1.8.0_111 Path新增一行:%JAVA_HOME%\bin 1.2 apache-maven-3.5.0-bin,直接解压到C:\Program Files\Java 环境变量 MAVEN_HOME:C:\Program Files\Java\apache-maven-3.5.0 Path新增一行:%MAVEN_HOME%\bin 1.3 G
-
部署vue+Springboot前后端分离项目的步骤实现
单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文
-
你不知道的SpringBoot与Vue部署解决方案
前言 前段时间公司外网部署的演示环境全部转到内网环境中去,所有对外演示的环境都需要申请外网映射才能访问某个服务.我用一个外网地址 www.a.com 映射到一个内网地址 http://ip:port ,然后在这个地址 http://ip:port 用 nginx 做代理转发到各个组的项目 http://ipn:portn 上去,其中也遇到一些静态资源 404,主要是是解决这个 404 问题. 最近又做了一个项目,考虑到用户的体验,减少部署的复杂性,我想了一个办法用 SpringBoot 做 we
-
SpringBoot集成vue的开发解决方案
最近由于工作要求:前端采用vue开发,后端采用springboot开发,前后端分离开发,最后前端页面又整合到后端来.经历多次采坑,总结以下方案: vue build后的文件部署到springboot目录 vue打包后,会生成dist目录 springboot静态资源目录如下: SpringBoot处理静态资源和页面,设置如下: @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registr
-
docker部署springboot和vue项目的实现步骤
A. docker 部署 springboot项目 一.springboot项目编译打包 二.在项目根目录创建Dockerfile文件 FROM openjdk:8-jdk-alpine VOLUME /tmp ADD ./target/demo-0.0.1-SNAPSHOT.jar demo.jar RUN sh -c 'touch /demo.jar' ENTRYPOINT ["sh", "-c", "java $JAVA_OPTS -Djava.se
-
关于SpringBoot与Vue交互跨域问题解决方案
目录 浏览器同源策略 一.VUE前端配置代理解决跨域 (1)Vue中让浏览器请求携带cookie (2)vue中配置代理解决跨域 第一步,设置统一访问路径 第二步.配置跨域代理 第三步.测试请求 二.springboot后端配置解决跨域 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 浏览器同源策略 为什么会出现跨域问题? 首先一个定义一定要了解,就是浏览器的同源策略, 什么是浏览器的同源策略, 简单来说就是浏览器发送请求的协议.域名和端口要和服务器接收请求的协议.域名以及端口一致.
-
Vue向后台传数组数据,springboot接收vue传的数组数据实例
用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu
-
详解springboot和vue前后端分离开发跨域登陆问题
前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,
-
Linux 启动停止SpringBoot jar 程序部署Shell 脚本的方法
废话不多说了,先给大家上代码,具体代码如下所示: #!/bin/bash cd `dirname $0` CUR_SHELL_DIR=`pwd` CUR_SHELL_NAME=`basename ${BASH_SOURCE}` #修改这里jar包名即可 JAR_NAME="xxxxxxxxxxxx.jar" JAR_PATH=$CUR_SHELL_DIR/$JAR_NAME #JAVA_MEM_OPTS=" -server -Xms1024m -Xmx1024m -XX:Pe
-
springboot整合vue实现上传下载文件
springboot整合vue实现上传下载文件,供大家参考,具体内容如下 环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件 设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l
-
springboot跨域问题解决方案
这篇文章主要介绍了springboot跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 springboot中的跨域问题,如果不注意的话,容易造成错误,本次springboot版本为2.13 前端错误信息: Access to XMLHttpRequest at 'http://localhost:8080/user/loginOn' from origin 'http://localhost:8082' has been blo
-
springboot+idea热部署的实现方法(自动刷新)
近来在使用idea做springboot的项目,但是发现每次修改之后我都需要重新将项目关闭再开启,这样比较繁琐,发现通过热部署的方式让我们可以一边修改我们的项目,然后在页面中直接通过刷新展示出来 spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtools的原理 深层原理是使用了两个ClassLoader,一个Classloader加载那些不会改变的类(第