❤ 全面解析若依框架vue2版本(springboot-vue前后分离--前端部分)

❤ 解析若依框架之前台修改

1、修改页面标题-网页logo-页面标题-登录名称

修改网页上的logo

ruoyi-ui --> public --> favicon.ico,把这个图片换成你自己的logo
修改网页标题

根目录下的vue.config.js

const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题

换成自己网站标题
修改页面中的logo

ruoyi-ui --> src --> assets --> logo --> logo.png,把这个图片换成你自己的logo
修改页面标题

ruoyi-ui --> src --> layout --> components --> Sidebar --> Logo.vue

title: '若依管理系统', 换成自己网站的名称(或者全局搜索)
修改登录名称

ruoyi-ui --> src -->views 下的login.vue文件中的

<h3 class="title">若依后台管理系统</h3> 修改成自己的管理后台名称
修改注册系统显示名称

ruoyi-ui --> src -->views 下的register.vue 文件中的

<h3 class="title">若依后台管理系统 修改成自己管理后台名称
配置文件名称

将这个名称 VUE_APP_TITLE = 若依管理系统

换成自己网站名称

2、首页右上角 源码地址 & 文档地址头部管理

在ruoyi-ui=> src => layout => Navnar.vue 下找到 Navbar.vue 这个文件

3、更改面包屑

注意components =》 Breadcrumb=》 index.vue

js 复制代码
isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim() === 'Index'
 },
 
 //判别 name.trim() === 'Index' 是否和路由名称对应

4、发布服务器,点击刷新、退出报404和nginx欢迎页面问题解决

layout => Navbar

监听多次刷新时是否 重新载入或者跳转到index

js 复制代码
async logout () {
      this.$confirm('确定注销并退出系统吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$store.dispatch('LogOut').then(() => {
        //   location.reload()
        // })
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    }

//【解决结果】无效

5、若依 ruoyi 修改默认布局设置

代码 ruoyi-ui/src/settings.js

6、开启网页的动态标题

标题与路由呼应

7、 自己设定当前标题

直接挂载到mounted 里面即可

js 复制代码
mounted(){
    document.title ='测试权限';
  }

8、若依对于Element主题色的配置

在main.js中配置了Element 主题色配置

更改以后的效果

相关推荐
suuijbd8 分钟前
SpringCloud+Netty集群即时通讯项目
spring boot·分布式·spring cloud·java-rabbitmq·java-zookeeper
前端大卫29 分钟前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友31 分钟前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
陈果然DeepVersion1 小时前
Java大厂面试真题:Spring Boot+Kafka+AI智能客服场景全流程解析(十)
java·spring boot·ai·kafka·面试题·向量数据库·rag
摇滚侠2 小时前
Spring Boot3零基础教程,Reactive-Stream 四大核心组件,笔记106
java·spring boot·笔记
小李小李不讲道理2 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻2 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
陈果然DeepVersion2 小时前
Java大厂面试真题:Spring Boot+微服务+AI智能客服三轮技术拷问实录(六)
java·spring boot·redis·微服务·面试题·rag·ai智能客服
mapbar_front3 小时前
在职场生存中如何做个不好惹的人
前端
牧杉-惊蛰3 小时前
纯flex布局来写瀑布流
前端·javascript·css