logo、背景图更换
如果使用若依框架项目做为脚手架，那么我们肯定需要在页面显示中，使用符合自己公司或者项目的标识才行，需要更换的地方很多，我们依次来解决它
浏览器标签页logo标识、标题
系统页面中的logo标识、标题
登录名称及背景图
去除源码地址 & 文档地址 &若依官网标识
浏览器标签页logo标识、标题
logo替换
找到资料中UI资料目录下的logo图标，替换前端项目中的public文件夹，删除原有的favicon.ico，把新拷贝过来的logo更名为favicon.ico即可
标题更换
找到根目录下的index.html文件，把title更换为自己想要的内容即可
标题替换
若依的系统页面标题引用的是开发环境的配置，我们只需要修改开发的环境的VITE_APP_TITLE属性即可
如下图：
扩展阅读：
关于环境的文件一般有三个
.env.development 开发环境的配置，默认的环境
.env.production 生产环境
.env.staging 测试环境
在打包或启动项目的时候，可以加参数来使用不同的环境，需要参考package.json中的配置
logo替换
找到当天资料中的logo文件，替换 src/assets/logo/logo.png文件
最终效果：
登录名称及背景图
登录名称和背景图，我们可以直接找到登录的组件进行修改即可
组件位置：src/views/login.vue
登录名称
背景图
资料中已经提供了背景图，可以自行命名更换，注意图片名可能不一样
最终效果图：
去除源码地址 & 文档地址 & 若依官网标识
利用菜单功能，去除若依官网菜单项目
使用VS Code全局搜索功能，去除右上角的源码地址和文档地址
文件路径：RuoYi-Vue3-master\src\layout\components\Navbar.vue
最终效果：
主题UI风格调整
在目前的前端项目中，已经提供了非常便利的操作方式，可以切换主题的风格
操作：点击右上角的头像，可以找到布局设置，如下操作
在前端代码中也有对应的操作，文件位置：src/setting.js
JavaScript
运行代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
export default {
/**
- 网页标题
/
title: import.meta.env.VITE_APP_TITLE,
/* - 侧边栏主题 深色主题theme-dark，浅色主题theme-light
/
sideTheme: 'theme-dark',
/* 是否系统布局配置
*/
showSettings: true,/**
是否显示顶部导航
*/
topNav: false,/**
是否显示 tagsView
*/
tagsView: true,/**
是否固定头部
*/
fixedHeader: false,/**
是否显示logo
*/
sidebarLogo: true,/**
是否显示动态标题
*/
dynamicTitle: false,/**
- @type {string | array} 'production' | ['production', 'development']
- @description Need show err logs component.
- The default is only used in the production env
- If you want to also use it in dev, you can pass ['production', 'development']
*/
errorLog: 'production'
}
更换主题颜色：
文件位置：src/store/modules/settings.js
Plain Text
复制代码
1
theme: storageSetting.theme || '#00b8a0',
更换后的效果：
