若依框架前端静态资源如何整合到后端访问

最新推荐文章于 2025-06-10 17:03:35 发布

LAYG

最新推荐文章于 2025-06-10 17:03:35 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

原文链接：https://my.oschina.net/daixingdeng/blog/4910023

文章详细描述了如何将前端Vue应用的静态资源与后端SpringBoot应用整合部署的过程，包括修改环境变量、设置路由模式、打包前端、引入Thymeleaf模板引擎、配置静态资源处理和访问控制，以及创建控制器处理页面请求。最后，通过在后端添加静态资源并启动服务进行测试访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分离版本都是前端和后端单独部署的，但是有些特殊情况想把前端静态资源整合到后端。提供如下方案：

修改ruoyi-ui中的.env.production（二选一）

// 本机地址访问VUE_APP_BASE_API = '/'
 
// 任意地址访问VUE_APP_BASE_API = '//localhost:8080'

修改ruoyi-ui中的router/index.js，设置mode属性为hash

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

执行bin\build.bat打包前端静态资源文件。

修改后端resources中的application.yml，添加thymeleaf模板引擎配置

spring:
  # 模板引擎
  thymeleaf:
    mode: HTML
    encoding: utf-8
    cache: false

修改后端pom.xml，增加thymeleaf模板引擎依赖

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

修改后端ResourcesConfig.java中的 addResourceHandlers，添加静态资源映射地址

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

修改后端SecurityConfig.java中的 configure，添加允许访问的地址。

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

8、后端新建访问控制处理IndexController.java设置对应访问页面。

package com.ruoyi.project.system.controller;

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";
    }
}

9、整合前端dist静态资源文件到后端