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

这篇具有很好参考价值的文章主要介绍了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启动类

 <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类中
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
点进去可以看到静态资源的默认配置
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

“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用的比较少
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
熟悉了SpringBoot访问静态资源的默认配置,那么可以将前端vue项目打包后来测试,首先vue项目中有一个点儿得注意,那就是注释掉axios的统一拦截器里的baseURL 不需要用到这个,如果忘记注释,那极有可能是本地能访问,线上不能访问。
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
放入static的目录下面
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
启动SpringBoot后浏览器访问 只需要访问

http://localhost:24800/

会自动跳转到登录页面

http://localhost:24800/#/login

SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
如此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)
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里
我的拦截器配置
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;


@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路径
SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里文章来源地址https://www.toymoban.com/news/detail-491168.html

到了这里,关于SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue打包到jar资源访问被shiro拦截

    2.装载资源访问 3.pom文件静态资源开放 先记录一下配置,具体原理有时间再整理!

    2024年02月14日
    浏览(19)
  • 如何解决使用若依前后端分离打包部署到服务器上后主包无法找到从包中的文件的问题?如何在 Java 代码中访问 jar 包中的资源文件?

    在使用若依前后端分离打包部署到服务器上后,可能会出现主包无法找到从包中的文件的问题,这个问题通常是由于资源文件没有正确地打包到 jar 包中导致的。本文将介绍如何解决这个问题,包括如何在 Java 代码中访问 jar 包中的资源文件、如何将资源文件复制到系统临时目

    2024年02月22日
    浏览(31)
  • 补充前端访问静态资源的一个错误

    注意,前端访问时带上本地服务端的host,例如http://localhost:8080, 后端改写的代码如下,注意file后面一定是三个‘/’,不然的化虽然能解析,但访问不到。 错误来源https://mp.csdn.net/mp_blog/creation/editor/135489062 错误内容已改正。 

    2024年01月21日
    浏览(43)
  • [绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到

    缺点:需要和部署的路径保持一致,不是很灵活 1、在环境变量.env中定义url前缀 2、定义vue路由前缀路径router/index.js 3、vue配置公共路径前缀vue.config.js 4、打包部署到nginx或其他中间件,此时要保证前缀和部署的前缀保持一致 nginx 1、使用history模式 2、定义vue路由前缀路径rout

    2024年02月11日
    浏览(30)
  • Springboot设置并访问静态资源目录

    目录 ​​​​​​​ 静态文件 application设置方法 配置详解 编写配置 优缺点 设置配置类方法 配置详解 编写配置 优缺点 总结         静态资源,一般是网页端的: HTML文件、JavaScript文件和图片 。尤其是 设置图片的静态资源 ,尤其重要: 这样的静态资源访问不会被Sp

    2024年02月15日
    浏览(31)
  • 记录使用nginx部署静态资源流程,以及遇到的访问静态资源404问题

    将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署实现 动静分离 ,提高用户访问静态代码的速度,降低对后台应用访问,减轻后台服务器的压力。 这里我选择放在了 html文件夹 下,(也可以放在和html文件夹同级,或其它位置 打开 conf文件夹 打开总配置文

    2024年02月08日
    浏览(38)
  • 若依框架前端静态资源到后端访问

    修改ruoyi-ui中的.env.production(二选一) 修改ruoyi-ui中的router/index.js,设置mode属性为hash 打包前端静态资源文件。 修改后端resources中的application.yml,添加thymeleaf模板引擎配置 修改后端pom.xml,增加thymeleaf模板引擎依赖 修改后端ResourcesConfig.java中的 addResourceHandlers,添加静态资源映

    2024年02月06日
    浏览(42)
  • Vue3 - vite 引入本地图片方法,页面引入本地静态资源图像详细教程,解决 UI 前端组件库的图片属性无法使用本地图像问题(无论是本地开发还是打包部署,本地图片的路径正常可用)

    在 webpack 中通常用 require() 来引入静态图片,但在 vite 中这种方法就不行了。 本文实现了 在 vue3+vite 项目开发中,实现引入本地图片(静态资源),并且 build 打包后依然正常运行, 支持普通 img 标签使用,也支持 UI 组件库的各种 “图片属性” 当参数进行使用。 如下图所示

    2024年02月08日
    浏览(34)
  • SpringBoot代理访问本地静态资源400 404

    问题:访问过程中可能会出现400、404问题 前提:保证有文件,并且文件路径正确 SpringBoot如何配置静态资源代理,大家可以网上找一找,或者也可以参考我的另一篇博客 SpringBoot addResourceHandlers 代理静态资源 1、路径纯英文 此种情况目前没有遇到过问题 2、路径包含中文 此种

    2024年02月12日
    浏览(29)
  • 【BUG】SpringBoot 静态资源(static)无法访问问题404

    SpringBoot访问静态资源出现 404 项目场景 问题描述 ​编辑原因分析 解决方案 1. 将静态资源放在static 或 templates目录中 2. 继承WebMvcConfigurerAdapter  【已经过时】 3. 继承WebMvcConfiguratiWebonSupport 【推荐】 4. 实现WebMvcConfigurer接口 【推荐】 WebMvcConfiguratiWebonSupport 与 WebMvcConfigurer 区别

    2024年02月05日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包