百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

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

ccwgpt 2024-09-13 16:03 57 浏览 0 评论

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

1、修改ruoyi-ui中的.env.production(二选一)

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

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

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

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

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

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

5、修改后端ruoyi-admin/pom.xml,增加thymeleaf模板引擎依赖

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

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

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

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

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


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

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静态资源文件到后端

  • 后端resources下新建templates目录,复制静态页面index.html过来。
  • 复制静态文件staticresources目录下。

10、启动测试访问地址

打开浏览器,输入:http://localhost:8080 能正常访问和登录表示成功。

注意

由于切换成了一个应用启动前后端,所以不需要通过代理跳转,前端组件如果用到process.env.VUE_APP_BASE_API可以进行删除。防止打包部署后访问不到后端。

例如:process.env.VUE_APP_BASE_API + "/common/upload" 换成 "/common/upload",还有哪里用到了自己全局搜索一下删除。

如果嫌麻烦还有一种简单的方式,将.env.productionVUE_APP_BASE_API改成空字符串。 VUE_APP_BASE_API = '',然后将index.html移动到static目录下,同时访问地址则变成 http://localhost:8080/index.html,另外IndexController.java可以删除。

参考:

https://doc.ruoyi.vip/ruoyi-vue/other/faq.html#%E5%89%8D%E7%AB%AF%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E5%A6%82%E4%BD%95%E6%95%B4%E5%90%88%E5%88%B0%E5%90%8E%E7%AB%AF%E8%AE%BF%E9%97%AE

相关推荐

公司组织架构及部门职责#管理制度 #薪酬绩效 #组织架构

...

终于把“公司组织架构与管理部岗位配置”整理好了,拿来即用!

...

老板看完这份“公司组织架构详解”就解放了!

...

丨公司丨公司大架构整理汇总

注:本文转自团队成员原创作品,特此鸣谢(公号:法海图鉴)今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍,想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...

图解物理--八年级物理下册最全知识框架导图

第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...

八年级上册生物,思维导图,期末高分必备资料,家长收藏

这是八年级上册生物的思维导图,孩子在背诵知识点的时候,可以看一下知识点在导图中的位置,形成对知识点整体的把握,有助于学生拿高分,特别是图片中带红色星星的部分,更是要注意背诵,是重点内容。家长可以把图片...

2019政府工作报告精华,这张思维导图里全都有

每经记者:李可愚每经编辑:陈星每日经济新闻

图解薪酬体系结构设计

...

司考复习独家总结!一张图总结行政法知识结构体系

作为三大实体法之一,行政法的分值在60分左右,行政法在司法考试中一直比较平稳常规,没有偏题怪题,还是比较容易得分的。小编要提醒大家,在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...

一图读懂香港国安新架构:各职位人选公布 有官员曾强硬喊话乱港分子

实用干货!高中物理框架图,让零碎知识“串联”起来

高中物理学习一定要抓好逻辑结构大框架!了解整个知识框架体系后,更易抓住骨干知识,干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧!力学知识结构图光学知识结构图热学、原子物理知识结构图...

254m超高层办公楼型钢砼框架-核心筒结构图

高度类别:超高层建筑钢筋混凝土结构:框架,框架核心筒钢结构:钢框架建筑功能:办公包含:办公楼57层(-3层)254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层(-...

砖混结构与框架结构,究竟有何区别?千万别被坑!

现在买房装修的人最怕啥?不是价格高,而是房子不安全!两种主流建筑结构,砖混靠墙,框架靠柱子,选错了隔墙都可能要命。简单说,砖混便宜但别碰高层,框架贵点但能保命。砖混那些承重墙根本不能拆,想砸墙改个开放...

大师一百——高中化学必考:《元素周期律》考点框架图

今天大师给大家带来的是高中化学的《元素周期律》考点框架图,高中的同学必须牢记于心,这种重要的考点,考试是一定会考的!化学大师...

需求分析框架图

需求分析框架图

取消回复欢迎 发表评论: