❤ Analyze the front-end modification of Ruoyi framework
1. Modify the page title-webpage logo-page title-login name
Generally, it is named "favicon.ico" under the public folder of the vue project
❤ Processing steps
Step 1: Rename the icon to "favicon.ico" and place it in the project root directory.
Step 2: Then introduce it in index.html, and modify the page title in title.
Step 3: Modify the content in the webpack .dev.conf.js and webpack.prod.conf.js files under the build folder.
Step 5: Restart has succeeded
Modify the logo on the web page
ruoyi-ui --> public --> favicon.ico, replace this picture with your own logo
Modify page title
vue.config.js in the root directory
const name = process.env.VUE_APP_TITLE || 'Zuoyi Management System' // page title
Change to your own website title
Modify the logo on the page
ruoyi-ui --> src --> assets --> logo --> logo.png, replace this picture with your own logo
Modify page title
ruoyi-ui --> src --> layout --> components --> Sidebar --> Logo.vue
title: 'Ruoyi Management System', replace it with the name of your own website (or global search)
Modify the login page name
In the login.vue file under ruoyi-ui --> src -->views
<h3 class="title">若依后台管理系统</h3>Change it to your own management background name
Modify the display name of the registration system page
In the register.vue file under ruoyi-ui --> src -->views
<h3 class="title">If you change it to your own management background name according to the background management system
profile name
Replace the name VUE_APP_TITLE = Ruoyi Management System
with your own website name
2. Source code address & document address header management in the upper right corner of the home page
Find the Navbar.vue file under ruoyi-ui=> src => layout => Navnar.vue
3. Change breadcrumbs
Note components = "Breadcrumb = "index.vue
isDashboard(route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim() === 'Index'
},
//判别 name.trim() === 'Index' 是否和路由名称对应
4. Publish the server, click refresh, exit to report 404 and nginx welcome page problem solving
layout => Navbar
Whether to reload or jump to index when monitoring multiple refreshes
async logout () {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.$store.dispatch('LogOut').then(() => {
// location.reload()
// })
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
})
}
//【Solution result】invalid
5. If you modify the default layout settings according to ruoyi
Coderuoyi-ui/src/settings.js
6. Turn on the dynamic title of the web page
Title and route echo
7. Set the current title by yourself
Just mount it directly to mounted
mounted(){
document.title ='测试权限';
}
8. Ruoyi’s configuration of the theme color of Element
Element theme color configuration is configured in main.js
After changing the effect
