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

港控/mmm° 2024-03-24 08:41 19阅读 0赞

记录一下使用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 1]  
点进去可以看到静态资源的默认配置  
![myw][myw 2]

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

> http://localhost:24800/

会自动跳转到登录页面

> http://localhost:24800/\#/login

![myw][myw 6]  
如此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][myw 7]  
我的拦截器配置  
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

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

> /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路径  
![myw][myw 8]

[myw]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/4c34ac81d4094e0d89501e9b4a0c86ea.png
[myw 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6b48044a195c4f3dadb7cf3603ee5332.png
[myw 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1bb6f76f1b994e218cf0a02d26376f2f.png
[myw 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7932f6d1650c437988018b4ae8957f74.png
[myw 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/588329ffdf584917b874cc1a30c946a3.png
[myw 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/943a3aaee72f42cc861c1a4192e713e5.png
[myw 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/137f2bd257fa4559af904b79a1fb656d.png
[myw 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/518c4a792d674093bf84d0f9ed06686b.png
[myw 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ead194444577450f9357bcc02794d4f4.png