# 配置
配置是开发一个后台项目的重要环节,它是一个后台项目的基础。想要了解一个后台项目,先要了解它的配置。
# 站点配置
admin-antd-vue-vite
内置了一个站点配置文件 @/config/settings.ts
。
import { RoutesDataItem } from "@/utils/routes";
export type Theme = 'dark' | 'light';
export type NavMode = 'inline' | 'horizontal';
/**
* 站点配置
* @author LiQingSong
*/
export interface SettingsType {
/**
* 站点名称
*/
siteTitle: string;
/**
* 站点首页路由
*/
homeRouteItem: RoutesDataItem;
/**
* 站点本地存储Token 的 Key值
*/
siteTokenKey: string;
/**
* Ajax请求头发送Token 的 Key值
*/
ajaxHeadersTokenKey: string;
/**
* Ajax返回值不参加统一验证的api地址
*/
ajaxResponseNoVerifyUrl: string[];
/**
* iconfont.cn 项目在线生成的 js 地址
*/
iconfontUrl: string[];
/**
* Layout 头部固定开启
*/
headFixed: boolean;
/**
* Layout tab菜单开启
*/
tabNavEnable: boolean;
/**
* IndexLayout 顶部菜单开启
*/
topNavEnable: boolean;
/**
* UniversalLayout 模板主题
*/
theme: Theme;
/**
* UniversalLayout 导航模式
*/
navMode: NavMode;
/**
* UniversalLayout 左侧侧边固定开启
*/
leftSiderFixed: boolean;
}
const settings: SettingsType = {
siteTitle: 'ADMIN-ANTD-VUE',
homeRouteItem: {
icon: 'control',
title: 'index-layout.menu.home.workplace',
path: '/home/workplace',
component: ()=> import('@/views/home/index.vue')
},
siteTokenKey: 'admin_antd_vue_token',
ajaxHeadersTokenKey: 'x-token',
ajaxResponseNoVerifyUrl: [
'/user/login', // 用户登录
'/user/info', // 获取用户信息
],
iconfontUrl: [],
/* 以下是针对所有 Layout 扩展字段 */
headFixed: true,
tabNavEnable: true,
/* 以下是针对 IndexLayout 扩展字段 */
topNavEnable: true,
/* 以下是针对 UniversalLayout 扩展字段 */
theme: 'dark',
navMode: 'inline',
leftSiderFixed: true,
};
export default settings;
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
# 路由入口配置文件
admin-antd-vue-vite
独立出了一个路由入口配置文件 @/config/routes.ts
,其目的主要是:统一引入@/layouts
下不同layout
的路由,集中处理重新格式化路由。
目前 @/config/routes.ts
的内容为:
import { createRouter, createWebHashHistory } from 'vue-router';
import { RoutesDataItem } from "@/utils/routes";
import settings from "@/config/settings";
import SecurityLayout from '@/layouts/SecurityLayout.vue';
/* UniversalLayout 通用布局,可以与 IndexLayout 互相代替 */
// import UniversalLayoutRoutes from '@/layouts/UniversalLayout/routes';
// import UniversalLayout from '@/layouts/UniversalLayout/index.vue';
/* IndexLayout 自定义布局,可以与 UniversalLayout 互相代替 */
import IndexLayoutRoutes from '@/layouts/IndexLayout/routes';
import IndexLayout from '@/layouts/IndexLayout/index.vue';
import UserLayoutRoutes from '@/layouts/UserLayout/routes';
import UserLayout from '@/layouts/UserLayout/index.vue';
const routes: RoutesDataItem[] = [
{
title: 'empty',
path: '/',
component: SecurityLayout,
children: [
{
title: 'empty',
path: '/',
redirect: settings.homeRouteItem.path,
component: IndexLayout,
children: IndexLayoutRoutes
},
{
title: 'empty',
path: '/refresh',
component: () => import('@/views/refresh/index.vue'),
},
]
},
{
title: 'empty',
path: '/user',
redirect: '/user/login',
component: UserLayout,
children: UserLayoutRoutes
},
{
title: 'app.global.menu.notfound',
path: '/:pathMatch(.*)*',
component: () => import('@/views/404/index.vue'),
}
]
const router = createRouter({
scrollBehavior(/* to, from, savedPosition */) {
return { top: 0 }
},
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: routes,
});
export default router;
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
48
49
50
51
52
53
54
55
56
57
58
59
60
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
48
49
50
51
52
53
54
55
56
57
58
59
60
说明:
详细文档请查看:路由和菜单
# Vuex Store 数据模型入口配置文件
admin-antd-vue-vite
集成了 Vuex
,配置文件 @/config/store.ts
实现了自动导入功能,并制定了 StoreModule规则
。
说明:
详细文档请查看:StoreModule
# 国际化入口配置文件
admin-antd-vue-vite
包含了国际化功能,并实现了自动导入功能,主要归功于国际化入口配置文件 @/config/i18n.ts
。
目前 @/config/i18n.ts
的内容为:
import { createI18n } from "vue-i18n";
import { getLocale, setLocale, importAllLocales } from "@/utils/i18n";
/**
* antd 多语言 配置
*/
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import zhTW from 'ant-design-vue/es/locale/zh_TW';
import enUS from 'ant-design-vue/es/locale/en_US';
export const antdMessages: { [key: string]: any} = {
'zh-CN': zhCN,
'zh-TW': zhTW,
'en-US': enUS,
}
/**
* 框架 多语言 配置
*/
export const messages = importAllLocales();
const i18n = createI18n({
legacy: false,
locale: getLocale(),
messages,
});
/**
* 设置语言
* @param locale
*/
export function setI18nLanguage(locale: string, realReload = false) {
setLocale(locale,realReload, function() {
// i18n.global.locale = locale // legacy: true
i18n.global.locale.value = locale;
})
}
export default i18n;
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
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
说明:
详细文档请查看:多语言
# vite 配置
admin-antd-vue-vite
基于 vite
来进行构建,所以有个 vite配置文件 /vite.config.ts
。
# 环境变量
admin-antd-vue-vite
基于 vite
来进行构建,所以有环境变量配置文件 /.env.development
、/.env.production
。