RuoYi前后端分离框架将前端dist资源集成到Jar包中独立部署

一、背景

.NET体系下通常采用服务端渲染（如Razor Pages）或直接包含前端资源，而Java Spring Boot项目虽支持静态资源打包，但Vue CLI工程需要独立的构建流程。主管要求将编译后的Vue工程直接嵌入JAR包中方便维护，本人不推荐这样，原因有三：

• 第一、Vue CLI需要npm run build生成dist，而Java项目通过Maven/Gradle打包，二者生命周期不同步；其次前端每次修改需重新构建并复制到resources/static，破坏了前端热更新优势
• 第二、前端每次修改需重新构建并复制到resources/static，破坏了前端热更新优势。
• 第三、强制Java开发者处理前端构建，违背前后端分离架构原则。

独立部署前端，通过Nginx反向代理解决跨域，保持技术栈自治性，才是正途。

二、集成过程

项目采用RuoYi前后端分离框架搭建，版本为3.8.9。将ruoyi-ui前端工程编译打包后的dist目录集成到Jar包中，主要分为前端和后端两部分工作，话不多说，直接开干。

1.后端工程修改

后端工程的修改主要涉及三个地方：第一个是添加模版引擎的依赖并配置，第二个是静态资源注册映射；第三是鉴权拦截器放行静态资源的访问。

• 添加模版引擎依赖主要是为了支持渲染dist目录的前端资源，需要引用与springboot版本匹配的依赖，如下：

          <dependency>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-starter-thymeleaf</artifactId>
          </dependency>
  

  # thymeleaf配置
  spring:
    thymeleaf:
      prefix: classpath:/dist/
      mode: HTML
      encoding: UTF-8
      cache: false

• 修改ResourcesConfig类，注册静态资源（registry.addResourceHandler("/static/**").addResourceLocations("classpath:/dist/static/")）和添加视图控制器（

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
      registry.addViewController("/index").setViewName("index.html");
      registry.addViewController("/").setViewName("index.html");
      registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
  }），完整代码如下：

  package com.book.framework.config;
  
  import com.book.common.config.RuoYiConfig;
  import com.book.common.constant.Constants;
  import com.book.framework.interceptor.RepeatSubmitInterceptor;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.context.annotation.Bean;