最完整Vue后台框架vue-admin-better：从入门到精通的实战指南
项目地址: https://gitcode.com/GitHub_Trending/vue/vue-admin-better 你是否还在为寻找一款功能全面、易于上手的Vue后台管理框架而烦恼？是否在项目开发中遇到权限管理复杂、界面布局混乱、性能优化困难等问题？本文将带你全面了解vue-admin-better这款功能强大的Vue后台框架，从环境搭建到高级功能实现，一站式解决你的后台开发痛点。读完本文，你将能够：快速搭建vue-admin-better开发环境、掌握框架核心配置与布局定制、实现完善的权限管理系统、优化项目性能与用户体验。
框架简介与核心优势
vue-admin-better是一款基于Vue.js技术栈的企业级后台管理框架，支持Vue 2.x和Vue 3.x版本，提供了丰富的功能组件和完善的解决方案。该框架在GitHub上拥有极高的关注度，已被10万+项目实际应用，是Vue生态中最受欢迎的后台框架之一。
框架的核心优势主要体现在以下几个方面：
- 完善的权限控制：采用RBAC（Role-Based Access Control，基于角色的访问控制）模型结合JWT（JSON Web Token）实现前后端权限管理，支持前端控制路由权限（intelligence模式）和后端控制路由权限（all模式）两种方式，满足不同项目的权限需求。
- 丰富的功能组件：提供40+高质量单页应用，包含表格、表单、图表、地图等常用组件，以及权限管理、错误日志、主题切换等高级功能，可直接复用，减少重复开发工作。
- 优秀的用户体验：支持多主题切换、多布局模式（横纵布局），提供响应式设计，兼容PC、手机端、平板等多种设备，确保在不同屏幕尺寸下都能有良好的显示效果。
- 灵活的配置选项：提供50余项全局精细化配置，包括路由模式、登录拦截、RSA加密、缓存策略等，可根据项目需求灵活调整。
- 良好的性能优化：支持路由懒加载、组件缓存、图片压缩等性能优化手段，提升系统加载速度和运行效率。
框架的源码结构清晰，主要分为以下几个部分：
- src/api：存放API请求相关文件，如src/api/user.js处理用户相关接口。
- src/components：存放自定义组件，如src/components/VabUpload/index.vue是文件上传组件。
- src/config：存放框架配置文件，如src/config/setting.config.js是通用配置，src/config/theme.config.js是主题配置。
- src/layouts：存放布局组件，定义了系统的整体页面结构。
- src/router：存放路由配置文件，管理系统的路由信息。
- src/store：存放Vuex状态管理相关文件，管理应用的全局状态。
- src/views：存放页面组件，是系统的主要业务页面。
环境搭建与项目初始化
在开始使用vue-admin-better之前，需要先搭建好开发环境。本文以Vue 2.x + element-ui版本为例进行介绍，如果你需要使用Vue 3.x版本，可以参考官方文档进行相应的环境配置。
环境要求
- Node.js：v12.0.0及以上版本
- npm：v6.0.0及以上版本或yarn：v1.0.0及以上版本
- Git：用于克隆项目代码
项目克隆与依赖安装
首先，通过Git克隆项目代码。由于项目托管在GitCode上，仓库地址为https://gitcode.com/GitHub_Trending/vue/vue-admin-better，执行以下命令克隆项目：
# 克隆项目
git clone -b master https://gitcode.com/GitHub_Trending/vue/vue-admin-better.git
进入项目目录：
cd vue-admin-better
安装项目依赖。为了提高依赖安装速度，推荐使用国内npm镜像，如腾讯云镜像：
# 安装依赖
npm i --registry=http://mirrors.cloud.tencent.com/npm/
项目配置与启动
项目的核心配置文件位于src/config/setting.config.js，你可以根据项目需求修改相关配置。例如，开发环境端口号（devPort）默认是81，如果你需要修改，可以将其改为其他端口：
// src/config/setting.config.js
module.exports = {
// 开发环境端口号
devPort: '8080', // 将默认的81修改为8080
// 其他配置...
}
配置完成后，启动本地开发服务器：
# 本地开发 启动项目
npm run serve
启动成功后，在浏览器中访问http://localhost:81（如果修改了端口号，则使用修改后的端口），即可看到vue-admin-better的登录页面。
项目目录结构解析
项目启动后，我们来了解一下vue-admin-better的主要目录结构及其作用：
vue-admin-better/
├── src/ # 源代码目录
│ ├── api/ # API请求目录
│ ├── assets/ # 静态资源目录，如图片、样式等
│ ├── components/ # 自定义组件目录
│ ├── config/ # 配置文件目录
│ ├── layouts/ # 布局组件目录
│ ├── router/ # 路由配置目录
│ ├── store/ # Vuex状态管理目录
│ ├── utils/ # 工具函数目录
│ ├── views/ # 页面组件目录
│ ├── App.vue # 应用根组件
│ └── main.js # 应用入口文件
├── public/ # 公共静态资源目录
├── package.json # 项目依赖配置文件
└── README.md # 项目说明文档
其中，src/views/login/index.vue是登录页面组件，src/views/index/index.vue是系统首页组件。通过这些目录结构，我们可以清晰地了解项目的组织方式，方便后续的开发和维护。
核心配置与布局定制
vue-admin-better提供了丰富的配置选项和布局定制功能，能够满足不同项目的界面需求和交互习惯。本节将详细介绍框架的核心配置和布局定制方法。
全局配置详解
全局配置主要集中在src/config/setting.config.js文件中，该文件导出了一个包含各种配置项的对象。以下是一些常用的配置项及其说明：
- title：系统标题，将显示在浏览器标签页和登录页面等位置，默认值为'vue-admin-better'。
- routerMode：路由模式，可选值为'history'或'hash'，默认值为'hash'。'hash'模式下URL中会带有'#'，'history'模式则没有，但需要后端配合配置。
- routesWhiteList：不经过token校验的路由列表，如登录页、注册页等，默认包含['/login', '/register', '/404', '/401']。
- loginInterception：是否开启登录拦截，默认值为true。开启后，未登录用户访问需要权限的页面时会被重定向到登录页。
- loginRSA：是否开启登录RSA加密，默认值为true。开启后，登录时的密码会进行RSA加密传输，提高安全性。
- authentication：权限认证方式，可选值为'intelligence'或'all'。'intelligence'模式下后端只控制permissions，不控制view文件的import；'all'模式下完全由后端控制路由，前端只负责加载。
你可以根据项目需求修改这些配置项。例如，如果你的项目需要使用'history'路由模式，可以将routerMode修改为'history'：
// src/config/setting.config.js
module.exports = {
// 路由模式，可选值为 history 或 hash
routerMode: 'history',
// 其他配置...
}
主题与布局定制
vue-admin-better支持多种主题和布局模式，你可以通过配置文件或界面操作进行切换。
主题配置
主题配置位于src/config/theme.config.js文件中，主要配置项包括：
- header：头部布局方式，可选值为'fixed'（固定）或'noFixed'（不固定），默认值为'fixed'。
- layout：整体布局方式，可选值为'horizontal'（横向）或'vertical'（纵向），默认值为'vertical'。
- themeBar：是否显示主题配置按钮，默认值为true。显示后，在页面右上角会出现主题切换按钮，用户可以手动切换主题。
- tabsBar：是否显示多标签页，默认值为true。显示后，用户可以在顶部看到打开的多个页面标签，方便快速切换。
例如，如果你希望使用横向布局，可以修改layout配置：
// src/config/theme.config.js
module.exports = {
// 横纵布局 horizontal vertical
layout: 'horizontal',
// 其他配置...
}
除了通过配置文件修改，你还可以在系统界面中通过主题配置按钮实时切换主题和布局。点击页面右上角的主题配置按钮，会弹出主题配置面板，你可以在面板中选择不同的主题颜色、布局方式等，配置会实时生效。
自定义主题颜色
如果你需要自定义主题颜色，可以修改src/styles/element-variables.scss文件，该文件定义了element-ui的主题变量。例如，修改主色调：
// src/styles/element-variables.scss
$--color-primary: #1890ff; // 默认主色调为蓝色，可修改为其他颜色值
修改后，重新启动项目，主题颜色会相应改变。
路由配置与权限管理
路由是后台管理系统的核心部分，vue-admin-better的路由配置位于src/router/index.js文件中。路由配置支持静态路由和动态路由两种方式。
静态路由配置
静态路由是指在路由配置文件中直接定义的路由，不需要后端返回。例如，登录页、404页等公共页面通常配置为静态路由：
// src/router/index.js
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
// 其他静态路由...
]
动态路由配置
动态路由是指根据用户权限从后端获取的路由，通常在用户登录后，后端会返回该用户可访问的路由列表，前端根据返回的路由列表动态生成路由。动态路由的实现需要结合Vuex和权限认证逻辑。
在vue-admin-better中，权限认证逻辑主要在src/utils/permission.js文件中实现。该文件通过路由守卫（router.beforeEach）拦截路由跳转，判断用户是否登录、是否有权限访问目标路由。如果用户未登录，会重定向到登录页；如果用户没有权限访问目标路由，会重定向到401页或404页。
例如，权限认证的核心代码如下：
// src/utils/permission.js
router.beforeEach(async(to, from, next) => {
// 检查用户是否已登录
const hasToken = store.getters['user/accessToken']
if (hasToken) {
if (to.path === '/login') {
// 已登录，访问登录页时重定向到首页
next({ path: '/' })
} else {
// 检查用户是否已获取权限信息
const hasPermissions = store.getters['user/permissions'] && store.getters['user/permissions'].length > 0
if (hasPermissions) {
// 已获取权限，直接访问目标路由
next()
} else {
try {
// 获取用户权限信息
const { permissions } = await store.dispatch('user/getInfo')
// 根据权限生成动态路由
const accessRoutes = await store.dispatch('routes/generateRoutes', permissions)
// 添加动态路由
router.addRoutes(accessRoutes)
// 访问目标路由
next({ ...to, replace: true })
} catch (error) {
// 获取权限失败，重置token并跳转到登录页
await store.dispatch('user/resetAccessToken')
next(`/login?redirect=${to.path}`)
}
}
}
} else {
// 未登录，检查目标路由是否在白名单中
if (setting.routesWhiteList.includes(to.path)) {
// 在白名单中，直接访问
next()
} else {
// 不在白名单中，重定向到登录页
next(`/login?redirect=${to.path}`)
}
}
})
通过以上配置和逻辑，vue-admin-better实现了完善的路由权限管理功能，确保不同角色的用户只能访问其有权限的页面。
数据交互与状态管理
在后台管理系统中，数据交互和状态管理是非常重要的部分。vue-admin-better使用axios进行数据交互，使用Vuex进行状态管理，下面将详细介绍这两部分的使用方法。
Axios封装与API请求
axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中发送HTTP请求。vue-admin-better对axios进行了精细化封装，位于src/utils/request.js文件中，主要实现了请求拦截、响应拦截、错误处理等功能。
请求拦截器
请求拦截器用于在发送请求前对请求进行处理，例如添加token、转换请求数据格式等。在src/utils/request.js中，请求拦截器的代码如下：
instance.interceptors.request.use(
(config) => {
// 如果用户已登录，添加token到请求头
if (store.getters['user/accessToken']) {
config.headers[tokenName] = store.getters['user/accessToken']
}
// 过滤空值、0、false等无效参数
if (config.data) config.data = Vue.prototype.$baseLodash.pickBy(config.data, Vue.prototype.$baseLodash.identity)
// 如果是表单提交，转换数据格式为application/x-www-form-urlencoded
if (config.data && config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8')
config.data = qs.stringify(config.data)
// 对需要加loading层的请求显示loading
if (debounce.some((item) => config.url.includes(item))) loadingInstance = Vue.prototype.$baseLoading()
return config
},
(error) => {
return Promise.reject(error)
}
)
响应拦截器
响应拦截器用于在接收响应后对响应进行处理，例如判断请求是否成功、处理错误信息等。响应拦截器的代码如下：
instance.interceptors.response.use(
(response) => {
// 关闭loading层
if (loadingInstance) loadingInstance.close()
const { data, config } = response
const { code, msg } = data
// 操作正常Code数组
const codeVerificationArray = isArray(successCode) ? [...successCode] : [...[successCode]]
// 如果请求成功，返回数据
if (codeVerificationArray.includes(code)) {
return data
} else {
// 如果请求失败，处理错误信息
handleCode(code, msg)
return Promise.reject(...)
}
},
(error) => {
// 关闭loading层
if (loadingInstance) loadingInstance.close()
// 处理网络错误等异常情况
...
return Promise.reject(error)
}
)
发送API请求
在vue-admin-better中，API请求通常封装在src/api目录下的文件中。例如，src/api/user.js文件封装了用户相关的API请求：
// src/api/user.js
import request from '@/utils/request'
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
export function getInfo() {
return request({
url: '/user/info',
method: 'get'
})
}
export function logout() {
return request({
url: '/user/logout',
method: 'post'
})
}
在组件中使用这些API请求：
import { login } from '@/api/user'
export default {
methods: {
async handleLogin() {
try {
const res = await login(this.loginForm)
if (res.code === 200) {
this.$message.success('登录成功')
this.$router.push('/')
}
} catch (error) {
this.$message.error('登录失败')
}
}
}
}
Vuex状态管理
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vue-admin-better的Vuex状态管理位于src/store目录下，采用模块化的方式组织，每个模块负责管理一部分状态。例如，src/store/modules/user.js模块管理用户相关的状态，如用户信息、token等。
用户状态模块示例
// src/store/modules/user.js
const state = {
accessToken: '',
permissions: [],
userInfo: {}
}
const mutations = {
SET_ACCESS_TOKEN: (state, token) => {
state.accessToken = token
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo
}
}
const actions = {
// 登录
login({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo).then(response => {
const { data } = response
commit('SET_ACCESS_TOKEN', data.accessToken)
// 将token存储到localStorage或sessionStorage
setToken(data.accessToken)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
const { permissions, userInfo } = response.data
commit('SET_PERMISSIONS', permissions)
commit('SET_USER_INFO', userInfo)
resolve({ permissions, userInfo })
}).catch(error => {
reject(error)
})
})
},
// 退出登录
logout({ commit }) {
return new Promise((resolve) => {
logout().then(() => {
commit('SET_ACCESS_TOKEN', '')
commit('SET_PERMISSIONS', [])
removeToken()
resolve()
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在组件中使用Vuex
在组件中，可以通过this.$store访问Vuex的状态和方法，也可以使用mapState、mapActions等辅助函数简化代码。例如：
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters('user', ['accessToken', 'userInfo'])
},
methods: {
...mapActions('user', ['login', 'logout']),
async handleLogin() {
await this.login(this.loginForm)
this.$router.push('/')
}
}
}
通过Vuex，我们可以方便地管理应用的全局状态，实现组件之间的数据共享和通信。
常用功能实现与示例
本节将介绍vue-admin-better中几个常用功能的实现方法，包括表格组件、表单组件和权限控制，帮助你快速上手实际项目开发。
表格组件使用
表格是后台管理系统中最常用的组件之一，vue-admin-better提供了功能完善的表格组件，支持排序、筛选、分页、编辑等操作。表格组件的示例代码位于src/views/vab/table/index.vue。
基本表格示例
以下是一个简单的表格示例，展示用户列表数据：
<template>
<div class="app-container">
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
></el-table-column>
<el-table-column
prop="age"
label="年龄"
align="center"
></el-table-column>
<el-table-column
prop="email"
label="邮箱"
align="center"
></el-table-column>
<el-table-column
label="操作"
align="center"
width="180"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="pagination"
></el-pagination>
</div>
</template>
<script>
import { getList } from '@/api/table'
export default {
data() {
return {
list: [],
total: 0,
pageSize: 10,
currentPage: 1,
listLoading: false
}
},
created() {
this.getList()
},
methods: {
getList() {
this.listLoading = true
getList({
page: this.currentPage,
size: this.pageSize
}).then(response => {
this.list = response.data.list
this.total = response.data.total
this.listLoading = false
})
},
handleSizeChange(val) {
this.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.currentPage = val
this.getList()
},
handleEdit(row) {
// 编辑操作
this.$router.push({ path: '/user/edit', query: { id: row.id } })
},
handleDelete(row) {
// 删除操作
this.$confirm('确定要删除该用户吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送删除请求
deleteUser(row.id).then(() => {
this.$message.success('删除成功')
this.getList()
})
})
}
}
}
</script>
在这个示例中，使用el-table组件展示用户列表数据，el-pagination组件实现分页功能。通过getList方法从后端获取数据，并根据分页参数动态加载不同页的数据。
表单组件使用
表单用于收集和提交用户输入的数据，vue-admin-better提供了丰富的表单组件，如输入框、下拉框、日期选择器等，支持表单验证、动态表单等功能。表单组件的示例代码位于src/views/vab/form/index.vue。
基本表单示例
以下是一个简单的表单示例，用于添加用户：
<template>
<div class="app-container">
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" type="number"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" type="email"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { addUser } from '@/api/user'
export default {
data() {
return {
form: {
name: '',
age: '',
email: '',
gender: 'male'
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
{ min: 1, max: 120, message: '年龄必须在 1 到 120 之间', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
addUser(this.form).then(response => {
this.$message.success('添加成功')
this.$router.go(-1)
})
} else {
return false
}
})
},
resetForm() {
this.$refs.form.resetFields()
}
}
}
</script>
在这个示例中，使用el-form组件创建表单，el-form-item组件定义表单项，通过rules属性定义表单验证规则。点击提交按钮时，会先进行表单验证，验证通过后发送请求添加用户。
权限控制实现
权限控制是后台管理系统的重要功能，vue-admin-better基于RBAC模型实现了完善的权限控制功能。权限控制主要包括路由权限控制和按钮权限控制。
路由权限控制
路由权限控制通过动态路由实现，前面已经介绍过。当用户登录后，后端会返回该用户的权限列表，前端根据权限列表动态生成可访问的路由。
按钮权限控制
按钮权限控制用于控制页面中按钮的显示与隐藏，即不同权限的用户看到的按钮不同。vue-admin-better提供了v-permission指令用于实现按钮权限控制，该指令定义在src/utils/permission.js文件中。
使用v-permission指令的示例：
<template>
<div>
<el-button v-permission="['user:add']" type="primary" @click="handleAdd">添加用户</el-button>
<el-button v-permission="['user:edit']" type="success" @click="handleEdit">编辑用户</el-button>
<el-button v-permission="['user:delete']" type="danger" @click="handleDelete">删除用户</el-button>
</div>
</template>
在这个示例中，v-permission指令的参数是一个权限标识数组，只有当用户拥有对应的权限时，按钮才会显示。例如，如果用户没有'user:delete'权限，删除用户按钮会被隐藏。
v-permission指令的实现原理是：在指令绑定时，检查用户的权限列表中是否包含指令参数中的权限标识，如果包含则显示元素，否则隐藏元素。
项目优化与部署
完成项目开发后，需要对项目进行优化并部署到生产环境。本节将介绍vue-admin-better的项目优化方法和部署流程。
项目优化
项目优化可以提高系统的加载速度和运行性能，主要包括以下几个方面：
路由懒加载
路由懒加载可以减少初始加载时的资源体积，提高页面加载速度。vue-admin-better默认使用路由懒加载，路由配置如下：
// src/router/index.js
export const asyncRoutes = [
{
path: '/user',
component: Layout,
redirect: '/user/list',
name: 'User',
meta: {
title: '用户管理',
icon: 'user',
permissions: ['user:list']
},
children: [
{
path: 'list',
component: () => import('@/views/personnelManagement/userManagement/index'),
name: 'UserList',
meta: { title: '用户列表', permissions: ['user:list'] }
}
]
}
]
其中，component: () => import('@/views/...')就是路由懒加载的写法，只有当访问该路由时，才会加载对应的组件。
组件缓存
使用keep-alive组件可以缓存组件实例，避免重复渲染，提高页面切换速度。vue-admin-better在src/App.vue中使用了keep-alive组件：
<template>
<div id="app">
<keep-alive :max="keepAliveMaxNum">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
通过在路由元信息中设置keepAlive: true，可以缓存该路由对应的组件：
{
path: 'list',
component: () => import('@/views/personnelManagement/userManagement/index'),
name: 'UserList',
meta: {
title: '用户列表',
permissions: ['user:list'],
keepAlive: true // 缓存组件
}
}
图片压缩
vue-admin-better默认开启了图片压缩功能，配置位于src/config/setting.config.js中：
module.exports = {
// 是否开启图片压缩
imageCompression: true,
// 其他配置...
}
开启图片压缩后，在打包时会对图片进行压缩，减少图片体积。
项目打包与部署
项目开发完成并优化后，需要打包生成生产环境的代码，然后部署到服务器上。
项目打包
执行以下命令打包项目：
npm run build
打包完成后，会在项目根目录下生成dist文件夹，里面包含生产环境的代码。
项目部署
项目部署可以根据实际情况选择不同的方式，如Nginx部署、Tomcat部署等。这里以Nginx部署为例进行介绍。
- 将dist文件夹中的所有文件复制到Nginx的html目录下。
- 配置Nginx，修改nginx.conf文件：
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html; # 解决history路由模式下的404问题
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
- 启动Nginx，访问http://localhost即可看到部署的项目。
总结与展望
本文详细介绍了vue-admin-better框架的核心优势、环境搭建、核心配置、数据交互、状态管理、常用功能实现以及项目优化与部署等内容。通过本文的学习，你应该能够快速上手vue-admin-better框架，并使用它开发出功能完善、性能优良的后台管理系统。
vue-admin-better框架还在不断发展和更新中，未来可能会加入更多新功能和优化，如更好的Vue 3.x支持、更多的UI组件、更完善的性能优化等。建议你关注项目的官方仓库，及时了解框架的最新动态和更新内容。
最后，希望本文能够帮助你更好地使用vue-admin-better框架，祝你在项目开发中取得成功！如果你在使用过程中遇到问题，可以查阅框架的官方文档或加入官方QQ群寻求帮助。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
