admin-antd-vuewebpack

# 配置

配置是开发一个后台项目的重要环节，它是一个后台项目的基础。想要了解一个后台项目，先要了解它的配置。

# 站点配置

admin-antd-vue 内置了一个站点配置文件 @/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

# 路由入口配置文件

admin-antd-vue 独立出了一个路由入口配置文件 @/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(process.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

说明：

详细文档请查看：路由和菜单

# Vuex Store 数据模型入口配置文件

admin-antd-vue 集成了 Vuex，配置文件 @/config/store.ts 实现了自动导入功能，并制定了 StoreModule规则。

说明：

详细文档请查看：StoreModule

# 国际化入口配置文件

admin-antd-vue 包含了国际化功能，并实现了自动导入功能，主要归功于国际化入口配置文件 @/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

说明：

详细文档请查看：多语言

# vue-cli 配置

admin-antd-vue 基于 vue-cli来进行构建，所以有个 vue-cli 配置文件 /vue.config.js。

官方文档 (opens new window)

# 环境变量

admin-antd-vue 基于 vue-cli来进行构建，所以有环境变量配置文件 /.env.development、/.env.production。

官方文档 (opens new window)

← 布局 →