React项目打包整合到SpringBoot 再打成jar包教程

Dear 丶 2023-10-07 18:03 28阅读 0赞

网上关于React打包的教程特别少，大部分都是基于Vue的，不过React打包并不难，还是挺简单的。  
1.首先在package.json中加个内容：“homepage”: “.”  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]  
2.因为我这react项目有用到react-router-dom，因此要把所有BrowserRouter改成HashRouter（原因你们自己去查，我这就不多说了，这步不改的话打包后运行的项目路由没法正常跳转）：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 2]

3.接着在package.json文件中，点击build命令：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
这里如果没有快捷点击的命令，那么就手动输入：npm run build进行打包。

打包完会出现build文件夹：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 4]

到这里 前端react打包的任务就已经完成了啦。

接下来就是整合到SpringBoot项目中进行打成jar包！！！！

1.我们先在SpringBoot项目中建一个static文件夹：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
2.把前面前端打包的build文件夹里面的所有内容复制粘贴到static文件夹下面：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
3.接着我们要配置一些配置文件（跨域和文件访问设置）：  
先在pom.xml文件中添加依赖：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 7]

<dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-configuration-processor</artifactId>
          <optional>true</optional>
    </dependency>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 8]

@Configuration
    public class CorsConfig implements WebMvcConfigurer {
        
        @Override
        public void addCorsMappings(CorsRegistry registry) {
        
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowCredentials(true)
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .maxAge(3600);
        }
    }

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 9]

@Configuration
    public class WebConfig implements WebMvcConfigurer {
        
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
        
            registry.addResourceHandler("/static/static/**")
                    .addResourceLocations("classpath/static/static/**").resourceChain(true);
        }
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
        
    
            registry.addViewController("/").setViewName("forward:/index.html");
    
    
        }
    }

4.接下来就是打成jar包：先点闪电，再点install![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 10]  
5.接下来在target下面就能看到jar包，本地仓库也可以找到。找到jar包后输入java -jar jar包名称 就能访问执行了哈  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 12]  
6.启动完之后，输入网址：http://localhost:8080/index.html就能访问了哈  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 13]

--------------------

最后贴上我package.json中依赖的版本：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 14]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f2fdf79623df4cfb95b0a4d12e833365.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3eb2d26a0608411e8b04e1f1996c52a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/3acca2a9d82245cda02b91769156a6cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/854d3c7d07284be2afc085f85a264c42.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/d93e8e0ee830409abf25c7a53baf93c4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/b0325392aef9467f9cd374ba1b27691b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/d2b87ff92e784c479dfd727e1510306b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/4f987e96e75343f3b15efaaadbe15764.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/fe8b34b1544346e193b2bbaeab29906e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/a4331e8e0bc84136996e62a3866c5013.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/e8b991afd36c4b079d6d8d488f9f4a3d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/84d145863863424fae923e510d5c1047.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/e99b0872d7cf475f95fb45ea6ce9872a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/730a2ee657b34ffa9bd52985f6b599b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/f378278a73854bbd9d04b78fd90a979a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6L-Z6YeM5piv5p2o5p2o5ZCW,size_20,color_FFFFFF,t_70,g_se,x_16