SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里 |
您所在的位置:网站首页 › Angular15怎么检测静态资源是否有加载完成 › SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里 |
记录一下使用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启动类 org.springframework.boot spring-boot-starter-web点进去找到包spring-boot-starter org.springframework.boot spring-boot-starter 2.0.5.RELEASE compile使用SpringBoot的基础配置在spring-boot-autoconfigure(里面超级多配置) org.springframework.boot spring-boot-autoconfigure 2.0.5.RELEASE compileSpringBoot启动默认加载自动配置类,自动配置类的格式是xxxxxxAutoConfiguration,要寻找的(静态)资源配置在WebMvcAutoConfiguration类中 “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/这里,个人用的极少。 io.springfox springfox-swagger2 2.9.2 com.github.xiaoymin swagger-bootstrap-ui 1.9.2 org.webjars jquery 3.6.0classpath:/resources/, classpath:/static, classpath:/public 相对来说 static和public用的比较多 resources用的比较少 http://localhost:24800/ 会自动跳转到登录页面 http://localhost:24800/#/login
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) 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; @Configuration public 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 @Bean public 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等路径又被拦截器拦截了,那么全部放开 @Bean public 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路径 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |