devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

若依（ruoyi）前后端分离vue3版本一体化打包（合并打包）流程，maven自动整合_ruoyi-vue打包

作者：weixin_40725706 | 2024-02-29 11:43:48

赞

踩

ruoyi-vue打包

父目录

项目结构

添加pom文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.   <modelVersion>4.0.0</modelVersion>
  5.  
  6.   <groupId>com.父目录名</groupId>
  7.   <artifactId>父目录名</artifactId>
  8.   <packaging>pom</packaging>
  9.   <version>1.0-SNAPSHOT</version>
  10.  
  11.   <name>父目录项目名</name>
  12.   <description>改成自己的项目名</description>
  13.  
  14.   <parent>
  15.     <groupId>org.springframework.boot</groupId>
  16.     <artifactId>spring-boot-starter-parent</artifactId>
  17.     <version>2.5.15</version>
  18.     <relativePath />
  19.   </parent>
  20.  
  21.   <modules>
  22.     <module>前端名</module>
  23.     <module>后端名</module>
  24.   </modules>
  25.  
  26.   <properties>
  27.     <spring.boot.version>2.5.15</spring.boot.version>
  28.   </properties>
  29.  
  30.   <build>
  31.     <plugins>
  32.       <plugin>
  33.         <groupId>org.springframework.boot</groupId>
  34.         <artifactId>spring-boot-maven-plugin</artifactId>
  35.         <executions>
  36.           <execution>
  37.             <goals>
  38.               <goal>repackage</goal><!--可以把依赖的包都打包到生成的Jar包中-->
  39.             </goals>
  40.           </execution>
  41.         </executions>
  42.       </plugin>
  43.       <plugin>
  44.         <groupId>org.apache.maven.plugins</groupId>
  45.         <artifactId>maven-compiler-plugin</artifactId>
  46.         <configuration>
  47.           <source>1.8</source>
  48.           <target>1.8</target>
  49.         </configuration>
  50.       </plugin>
  51.     </plugins>
  52.   </build>
  53.  
  54. </project>

后端

pom文件添加打包插件：

  1. <!-- 插件maven-clean-plugin，用于在编译前，清除之前编译的文件、文件夹等，避免残留之前的内容 -->
  2. <plugin>
  3.   <groupId>org.apache.maven.plugins</groupId>
  4.   <artifactId>maven-clean-plugin</artifactId>
  5.   <version>3.1.0</version>
  6.   <configuration>
  7.     <filesets>
  8.       <fileset>
  9.         <!-- 前端资源目录，即：存放前端包目录-->
  10.         <directory>src/main/resources/static</directory>
  11.       </fileset>
  12.       <fileset>
  13.         <!-- Vue项目打包自动生成的dist目录 -->
  14.         <directory>${project.parent.basedir}/vue-ui/dist</directory>
  15.       </fileset>
  16.     </filesets>
  17.   </configuration>
  18. </plugin>
  19.  
  20. <!--frontend-maven-plugin为项目本地下载/安装Node和NPM，运行npm install命令-->
  21. <plugin>
  22.   <groupId>com.github.eirslett</groupId>
  23.   <artifactId>frontend-maven-plugin</artifactId>
  24.   <version>1.6</version>
  25.   <configuration>
  26.     <workingDirectory>${project.parent.basedir}/vue-ui</workingDirectory>
  27.   </configuration>
  28.   <executions>
  29.     <execution>
  30.       <id>install node and npm</id>
  31.       <goals>
  32.         <goal>install-node-and-npm</goal>
  33.       </goals>
  34.       <!-- 改成对应版本 -->
  35.       <configuration>
  36.         <nodeVersion>v16.13.0</nodeVersion>
  37.         <npmVersion>8.1.0</npmVersion>
  38.       </configuration>
  39.     </execution>
  40.     <!-- Install all project dependencies -->
  41.     <execution>
  42.       <id>npm install</id>
  43.       <goals>
  44.         <goal>npm</goal>
  45.       </goals>
  46.       <phase>generate-resources</phase>
  47.       <configuration>
  48.         <arguments>install</arguments>
  49.       </configuration>
  50.     </execution>
  51.     <!-- Build and minify static files -->
  52.     <execution>
  53.       <id>npm run build:prod</id>
  54.       <goals>
  55.         <goal>npm</goal>
  56.       </goals>
  57.       <configuration>
  58.         <arguments>run build:prod</arguments>
  59.       </configuration>
  60.     </execution>
  61.   </executions>
  62. </plugin>
  63.  
  64. <!--资源插件，主要为了从前端项目里复制打包好的文件到springboot项目-->
  65. <plugin>
  66.   <groupId>org.apache.maven.plugins</groupId>
  67.   <artifactId>maven-resources-plugin</artifactId>
  68.   <version>3.1.0</version>
  69.   <executions>
  70.     <execution>
  71.       <id>copy static</id>
  72.                         <phase>generate-resources</phase>
  73.                         <goals>
  74.                             <goal>copy-resources</goal>
  75.                         </goals>
  76.                         <configuration>
  77.                             <!-- 复制前端打包文件到这里 -->
  78.                             <outputDirectory>src/main/resources/static</outputDirectory>
  79.                             <overwrite>true</overwrite>
  80.                             <resources>
  81.                                 <resource>
  82.                                     <!-- 从前端打包的目录dist进行指定文件、文件夹内容的复制-->
  83.                                     <directory>${project.parent.basedir}/vue-ui/dist</directory>
  84.                                     <includes>
  85.                                         <!-- 具体根据实际前端代码、及目录结构进行配置-->
  86.                                         <include>static/css/</include>
  87.                                         <include>static/fonts/</include>
  88.                                         <include>static/img/</include>
  89.                                         <include>static/js/</include>
  90.                                         <include>favicon.ico</include>
  91.                                         <include>index.html</include>
  92.                                     </includes>
  93.                                 </resource>
  94.                             </resources>
  95.                         </configuration>
  96.                     </execution>
  97.                 </executions>
  98.             </plugin>

ResourcesConfig.java添加页面静态化和首页规则配置

  1. package com.pinnacles.framework.config;
  2.  
  3. import java.util.concurrent.TimeUnit;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7. import org.springframework.core.Ordered;
  8. import org.springframework.http.CacheControl;
  9. import org.springframework.web.cors.CorsConfiguration;
  10. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  11. import org.springframework.web.filter.CorsFilter;
  12. import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
  13. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
  14. import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
  15. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  16. import com.pinnacles.common.constant.Constants;
  17. import com.pinnacles.framework.interceptor.RepeatSubmitInterceptor;
  18.  
  19. /**
  20.  * 通用配置
  21.  * 
  22.  * @author casoft
  23.  */
  24. @Configuration
  25. public class ResourcesConfig implements WebMvcConfigurer
  26. {
  27.     @Autowired
  28.     private RepeatSubmitInterceptor repeatSubmitInterceptor;
  29.  
  30.     @Override
  31.     public void addResourceHandlers(ResourceHandlerRegistry registry)
  32.     {
  33.         /** 本地文件上传路径 */
  34.         registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**")
  35.         .addResourceLocations("file:" + CaSoftConfig.getProfile() + "/");
  36.  
  37.         /** 页面静态化 */
  38.         registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/static/");
  39.  
  40.         /** swagger配置 */
  41.         registry.addResourceHandler("/swagger-ui/**")
  42.         .addResourceLocations("classpath:/META-INF/resources/webjars/springfox-swagger-ui/")
  43.         .setCacheControl(CacheControl.maxAge(5, TimeUnit.HOURS).cachePublic());;
  44.     }
  45.  
  46.     /*首页规则*/
  47.     @Override
  48.     public void addViewControllers(ViewControllerRegistry registry) {
  49.         registry.addViewController("/index").setViewName("index.html");
  50.         registry.addViewController("/").setViewName("index.html");
  51.         registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
  52.     }
  53.  
  54.     /**
  55.      * 自定义拦截规则
  56.      */
  57.     @Override
  58.     public void addInterceptors(InterceptorRegistry registry)
  59.     {
  60.         registry.addInterceptor(repeatSubmitInterceptor).addPathPatterns("/**");
  61.     }
  62.  
  63.     /**
  64.      * 跨域配置
  65.      */
  66.     @Bean
  67.     public CorsFilter corsFilter()
  68.     {
  69.         CorsConfiguration config = new CorsConfiguration();
  70.         config.setAllowCredentials(true);
  71.         // 设置访问源地址
  72.         config.addAllowedOriginPattern("*");
  73.         // 设置访问源请求头
  74.         config.addAllowedHeader("*");
  75.         // 设置访问源请求方法
  76.         config.addAllowedMethod("*");
  77.         // 有效期 1800秒
  78.         config.setMaxAge(1800L);
  79.         // 添加映射路径，拦截一切请求
  80.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  81.         source.registerCorsConfiguration("/**", config);
  82.         // 返回新的CorsFilter
  83.         return new CorsFilter(source);
  84.     }
  85. }

SecurityConfig.java放开静态资源请求拦截

  1. @Override
  2.     protected void configure(HttpSecurity httpSecurity) throws Exception
  3.     {
  4.         // 注解标记允许匿名访问的url
  5.         ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
  6.         permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());
  7.  
  8.         httpSecurity
  9.                 // CSRF禁用，因为不使用session
  10.                 .csrf().disable()
  11.                 // 禁用HTTP响应标头
  12.                 .headers().cacheControl().disable().and()
  13.                 // 认证失败处理类
  14.                 .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
  15.                 // 基于token，所以不需要session
  16.                 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
  17.                 // 过滤请求
  18.                 .authorizeRequests()
  19.                 // 对于登录login 注册register 验证码captchaImage 允许匿名访问
  20.                 .antMatchers("/login", "/register", "/captchaImage").permitAll()
  21.                 // 静态资源，可匿名访问
  22.                 .antMatchers(HttpMethod.GET,"/**/**","/**","/index", "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**").permitAll()
  23.                 .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
  24.                 // 放开Swaggger文档
  25.                 .antMatchers("/doc.html","/static/**").anonymous()
  26.                 // 放开WebSocket
  27.                 .antMatchers("/websocket/**").permitAll()
  28.                 // 除上面外的所有请求全部需要鉴权认证
  29.                 .anyRequest().authenticated()
  30.                 .and()
  31.                 .headers().frameOptions().disable();
  32.         // 添加Logout filter
  33.         httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
  34.         // 添加JWT filter
  35.         httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
  36.         // 添加CORS filter
  37.         httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
  38.         httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
  39.     }

前端

添加pom.xml文件

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.  
  6.     <parent>
  7.         <artifactId>父目录的pom名</artifactId>
  8.         <groupId>com.父目录</groupId>
  9.         <version>1.0-SNAPSHOT</version>
  10.     </parent>
  11.  
  12.  
  13.     <groupId>com.父目录.vue-ui</groupId>
  14.     <artifactId>vue-ui</artifactId>
  15.  
  16.  
  17. </project>

修改.env.production文件

注释之后页面刷新不出现404问题

  1. # 直接注释掉
  2. # VITE_APP_ENV = 'production'
  3. # 直接注释掉或者改为 '/' 都行
  4. # VITE_APP_BASE_API = '/prod-api'

vite.config.js 打包未分包的需添加分包规则

与后端插件一起使用，按自己的打包结构来自行调整

  1.     build:{
  2.       rollupOptions:{
  3.         output:{
  4.           chunkFileNames: 'static/js/[name]-[hash].js',
  5.           entryFileNames: 'static/js/[name]-[hash].js',
  6.           assetFileNames: (assetInfo) => {
  7.             if (assetInfo.type === 'asset' && /\.(jpe?g|png|gif|svg)$/i.test(assetInfo.name)) {
  8.               return 'static/img/[name].[hash][ext]';
  9.             }   if (assetInfo.type === 'asset' && /\.(ttf|woff|woff2|eot)$/i.test(assetInfo.name)) {
  10.               return 'static/fonts/[name].[hash][ext]';
  11.             }
  12.             return 'static/[ext]/name1-[hash].[ext]';
  13.           },
  14.           //manualChunks 两种使用形式
  15.           // manualChunks:{
  16.           //   elementPlus:['element-plus']
  17.           // }
  18.           manualChunks(id) {
  19.             if (id.includes('element-plus')) {
  20.               return 'element-plus';
  21.             }
  22.           }
  23.         }
  24.       }
  25.     }

src/router/index.js 修改history

保证页面刷新不丢失

  1. const router = createRouter({
  2.   //将createWebHistory() 改为 createWebHashHistory()
  3.   // history: createWebHistory(),
  4.   history: createWebHashHistory(),
  5.   routes: constantRoutes,
  6.   scrollBehavior(to, from, savedPosition) {
  7.     if (savedPosition) {
  8.       return savedPosition
  9.     } else {
  10.       return { top: 0 }
  11.     }
  12.   },
  13. });

完成后，后端点击maven插件自带的package即可自动完成前后端打包＋整合

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/165405?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号