您现在的位置是:首页 > 经典句子

SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

作者:璐璐时间:2024-03-28 10:05:48分类:经典句子

简介  文章浏览阅读5.3k次,点赞2次,收藏12次。记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,部署前端打包后的vue项目放入静态资源里。_springboot打包后加载静态资源问题

点击全文阅读

记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到IP就可以,可是在某些特定的场合下,这个IP是不确定的,比如内网里某台内网设备部署一套采集程序,在事先知道内网IP的情况下可以前端用nginx部署 后台就是SpingBoot的jar运行,可是几十台内网设备都需要部署的话,那么前端打包的http请求地址将会根据具体的IP改变。
(不可能每台电脑都用http://127.0.0.1代替访问,如此的话,在内网里其他主机去访问就访问不到后台数据,因为目标变成了你正在操作访问的电脑了)

这里有一个解决办法,就是将前端vue项目打包后放入SpringBoot的静态资源里,实现了将前后端分离的应用一体化了

SpringBoot访问静态资源 可以将静态资源打包在jar内

首先去寻找资源路径(使用的是SpringBoot2.0.5)找到web启动类

 <dependency>     <groupId>org.springframework.boot</groupId>     <artifactId>spring-boot-starter-web</artifactId> </dependency>

点进去找到包spring-boot-starter

<dependency>  <groupId>org.springframework.boot</groupId>  <artifactId>spring-boot-starter</artifactId>  <version>2.0.5.RELEASE</version>  <scope>compile</scope></dependency>

使用SpringBoot的基础配置在spring-boot-autoconfigure(里面超级多配置)

<dependency>  <groupId>org.springframework.boot</groupId>  <artifactId>spring-boot-autoconfigure</artifactId>  <version>2.0.5.RELEASE</version>  <scope>compile</scope></dependency>

SpringBoot启动默认加载自动配置类,自动配置类的格式是xxxxxxAutoConfiguration,要寻找的(静态)资源配置在WebMvcAutoConfiguration类中
myw
myw
点进去可以看到静态资源的默认配置
myw

“classpath:/META-INF/resources/”,
“classpath:/resources/”,
“classpath:/static/”,
“classpath:/public/”

他们的默认访问先后顺序:/META-INF/resources/>/resources/>/static/>/public/
默认访问域名+端口,如果存在页面会去找默认页面index.html或index定向的地址

classpath:/META-INF/resources/
有其他方式在,这种方式一般不会去使用的,尝尝用在WebJars情况,比如映入常用的swagger,jquery,springBoot会默认把/webjars/**映射到 classpath:/META-INF/resources/webjars/这里,个人用的极少。

 <dependency>     <groupId>io.springfox</groupId>     <artifactId>springfox-swagger2</artifactId>     <version>2.9.2</version> </dependency> <dependency>     <groupId>com.github.xiaoymin</groupId>     <artifactId>swagger-bootstrap-ui</artifactId>     <version>1.9.2</version> </dependency><dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.6.0</version></dependency>        

classpath:/resources/, classpath:/static, classpath:/public 相对来说 static和public用的比较多 resources用的比较少
myw
熟悉了SpringBoot访问静态资源的默认配置,那么可以将前端vue项目打包后来测试,首先vue项目中有一个点儿得注意,那就是注释掉axios的统一拦截器里的baseURL 不需要用到这个,如果忘记注释,那极有可能是本地能访问,线上不能访问。
myw
放入static的目录下面
myw
启动SpringBoot后浏览器访问 只需要访问

http://localhost:24800/

会自动跳转到登录页面

http://localhost:24800/#/login

myw
如此SpringBoot加上前端vue打包后的代码一起打包成jar就成了,可是出现的另外的问题,当前端改变后,要打包,对于一些特定场景下的维护不太好,于是得找一个比较合理的方式,前端只需要将vue打包后的前端代码打包到对应的目录里,后端代码不需要嵌入前端的打包代码,不用每次前端改变而重新打包。

SpringBoot访问静态资源不打包在jar内

在配置文件里application.properties
Windows系统绝对路径

spring.resources.static-locations=file:///C:/DevelopSpace/static/,file:///C:/DevelopSpace/public/

Windows系统相对路径

spring.resources.static-locations=file:./static/,file:./public/

Centos7系统绝对路径

spring.resources.static-locations=file:/home/boot-black/static/,file:/home/boot-black/public/

Centos7系统相对路径

spring.resources.static-locations=file:./static/,file:./public/

使用这种方式在启动SpringBoot之前,必须将对应的static或public提前建立并且把vue编译后的源码放进去才能访问到,如果先启动SpringBoot的jar 再来对应地址新建static和public,将vue编译后的源码放进去,那么浏览器访问将会得到那熟悉的错误页面

另外,当前端重新编译后放到指定public和static后,需要重新刷新浏览器,清除缓存才能用,如此一般没有遇到问题,用这种方式,具体前端vue编译的代码变化很大的情况,没有详细测试过。

SpringBoot整合vue编译后的文件搞定之后,如果SpringBoot有拦截器,那么这里又会出现访问路径访问不到的问题,可是用域名+端口去访问 (http://localhost或者http://localhost:24800)
myw
我的拦截器配置
JwtTokenHandlerInterceptor.java

import com.fasterxml.jackson.databind.ObjectMapper;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.web.servlet.HandlerInterceptor;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class JwtTokenHandlerInterceptor implements HandlerInterceptor {    private final Logger log =  LoggerFactory.getLogger(this.getClass());    @Override    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {        System.out.println(request.getRequestURI());        System.out.println(request.getRequestURL());        String token = request.getHeader("token");        log.warn(request.getRequestURI());        if (!StringUtils.isNotEmptyBatch(token)) {            response.setCharacterEncoding("UTF-8");            response.setContentType("application/json; charset=utf-8");            Response responseResult = ResponseCode.invalidHeaderTokenResponse("api接口");            ObjectMapper objectMapper = new ObjectMapper();            String str = objectMapper.writeValueAsString(responseResult);            response.getWriter().println(str);        return false;        }// 验证token // to do        return true;    }    @Override    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {        HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);    }    @Override    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {        HandlerInterceptor.super.afterCompletion(request, response, handler, ex);    }}

JwtTokenInterceptorConfig.java

import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.InterceptorRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class JwtTokenInterceptorConfig {    @Bean    public JwtTokenHandlerInterceptor jwtTokenHandlerInterceptor(){        return new JwtTokenHandlerInterceptor();    }    @Bean    public WebMvcConfigurer webMvcConfigurer(){        return new WebMvcConfigurer() {            @Override            public void addInterceptors(InterceptorRegistry registry) {                registry.addInterceptor(jwtTokenHandlerInterceptor())                        .addPathPatterns("/**")                        .excludePathPatterns("/")                        .excludePathPatterns("/login") // 登录除外            }        };    }}

在拦截器里打印输出可以看到,那么把index.html放开

/index.html
http://localhost:24800/index.html
/index.html
http://localhost:24800/index.html

@Beanpublic WebMvcConfigurer webMvcConfigurer(){    return new WebMvcConfigurer() {        @Override        public void addInterceptors(InterceptorRegistry registry) {            registry.addInterceptor(jwtTokenHandlerInterceptor())                    .addPathPatterns("/**")                    .excludePathPatterns("/")                    .excludePathPatterns("/index.html")                    .excludePathPatterns("/login") // 登录除外        }    };}

访问还是不行,又爆出其他路径问题

/css/app.css
http://localhost:24800/css/app.css
/css/app.0.6.css
http://localhost:24800/css/app.0.6.css
/js/app.0.6.js
http://localhost:24800/js/app.0.6.js
/css/chunk-vendors.0.6.css
http://localhost:24800/css/chunk-vendors.0.6.css
/css/chunk-vendors.css
http://localhost:24800/css/chunk-vendors.css
/js/chunk-vendors.0.6.js

css js fonts img等路径又被拦截器拦截了,那么全部放开

@Beanpublic WebMvcConfigurer webMvcConfigurer(){    return new WebMvcConfigurer() {        @Override        public void addInterceptors(InterceptorRegistry registry) {            registry.addInterceptor(jwtTokenHandlerInterceptor())                    .addPathPatterns("/**")                    .excludePathPatterns("/")                    .excludePathPatterns("/index.html")                    .excludePathPatterns("/js/**")                    .excludePathPatterns("/css/**")                    .excludePathPatterns("/fonts/**")                    .excludePathPatterns("/img/**")                                        .excludePathPatterns("/login") // 登录除外        }    };}

如此,便解决了拦截器拦截的问题 刚好这几个对应的是vue编译后的css js fonts img index.html路径
myw

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

我来说两句