若依将前端静态资源整合到后端访问（315）

在实际开发和部署过程中，将前端静态资源整合到后端进行访问可以简化部署流程，并减少跨域问题。本文将详细介绍如何在 RuoYi 前后端分离框架中将前端静态资源整合到后端进行访问。

一、准备工作

在开始本教程之前，确保已经在本地成功运行了 RuoYi 前后端分离项目。如果还未运行，可以参考之前的教程：手把手教你启动 RuoYi 前后端分离项目。

二、修改前端配置

1. 更新 `ruoyi-ui` 中的 `.env.production` 文件

首先，需要修改前端的配置文件 .env.production，选择合适的访问路径。以下提供两种配置方式：

选项一：本机地址访问

VUE_APP_BASE_API = '/'

选项二：指定后端服务器地址访问

VUE_APP_BASE_API = '//localhost:8080'

2. 修改 `ruoyi-ui` 中的路由配置

接下来，打开 router/index.js 文件，将路由的模式设置为 hash 模式。这可以避免路由路径问题导致的页面加载错误。

export default new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
});

三、打包前端资源

1. 方法一：使用 `build.bat` 脚本进行打包

在 bin 目录下找到 build.bat 文件，双击运行该脚本，它会自动执行打包操作并生成前端静态资源文件。

2. 方法二：使用 npm 命令打包

打开终端，导航到前端项目的根目录，执行以下命令来打包前端资源：

npm run build:prod

打包完成后，将在项目目录中生成一个 dist 目录，其中包含打包好的静态资源文件。

四、修改后端配置

1. 配置 Thymeleaf 模板引擎

在后端 resources 目录下的 application.yml 文件中，添加 Thymeleaf 模板引擎的相关配置，以支持静态资源的解析。

spring:
  thymeleaf:
    mode: HTML
    encoding: utf-8
    cache: false

2. 添加 Thymeleaf 依赖

在 ruoyi-admin 模块的 pom.xml 文件中，添加 Thymeleaf 模板引擎的依赖。注意：不要将此依赖添加到项目的根目录下，否则可能会导致打包错误。

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

3. 配置静态资源映射

在 ResourcesConfig.java 文件中的 addResourceHandlers 方法中，添加静态资源的映射路径：

/** 前端静态资源配置 */
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");

4. 更新安全配置

在 SecurityConfig.java 文件中的 configure 方法中，添加允许访问的静态资源路径：

.antMatchers(
       HttpMethod.GET,
       "/*.html",
       "/**/*.html",
       "/**/*.css",
       "/**/*.js",
       "/profile/**",
       "/static/**",
       "/",
       "/index"
).permitAll()

5. 创建首页访问控制器

在后端新建一个 IndexController.java 控制器，用于处理首页访问请求：

package com.ruoyi.web.controller.system;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController
{
    // 系统首页
    @GetMapping(value = { "/", "/index", "/login" })
    public String index()
    {
        return "index";
    }
}

6. 整合前端资源到后端

将打包生成的 dist 目录中的静态资源整合到后端项目中：

在后端 resources 目录下新建 templates 目录，并将 dist 目录中的 index.html 文件复制到该目录中。
将 dist 目录中的 static 文件夹复制到 resources 目录下。

最终目录结构如下图所示：

五、启动项目

现在，您可以启动项目了。运行 RuoYiApplication.java 主类，项目将会启动。然后在浏览器中访问：http://localhost:8080/，您应该能够看到 RuoYi 项目的登录页面。

测试登录功能，确保整合后的项目可以正常工作。

六、打包项目

为了方便发布项目，您可以将项目打包为 JAR 文件。这里演示了两种打包方法：

1. 方法一：使用 IDEA 打包

在 IDEA 中，选择 package 命令来打包项目。可以在执行该命令时选择需要打包的模块。

2. 方法二：使用脚本打包

在项目的 bin 目录中找到 package.bat 文件，双击执行该脚本，它会自动进行打包。

打包完成后，您可以在 ruoyi-admin 模块的 target 目录中找到打包好的文件。

至此，您已成功将前端静态资源整合到后端项目中，并通过后端进行访问。

开发喵星球