admin-antd-reactv1.0-umijs

# 配置

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

# 站点配置

admin-antd-react 内置了一个站点配置文件 @/config/settings.ts。

export interface SettingsType {
  /**
   * 站点名称
   */
  siteTitle: string;

  /**
   * 顶部菜单开启
   */
  topNavEnable: boolean;

  /**
   * 头部固定开启
   */
  headFixed: boolean;

  /**
   * 站点本地存储Token 的 Key值
   */
  siteTokenKey: string;

  /**
   * Ajax请求头发送Token 的 Key值
   */
  ajaxHeadersTokenKey: string;

  /**
   * Ajax返回值不参加统一验证的api地址
   */
  ajaxResponseNoVerifyUrl: string[];

  /**
   * iconfont.cn 项目在线生成的 js 地址
   */
  iconfontUrl: string[];

  /**
   * 404 模板路径
   */
  notFoundComponent: string;
}

const settings: SettingsType = {
  siteTitle: 'ADMIN-ANTD-REACT',
  topNavEnable: true,
  headFixed: true,
  siteTokenKey: 'admin_antd_react_token',
  ajaxHeadersTokenKey: 'x-token',
  ajaxResponseNoVerifyUrl: [
    '/user/login', // 用户登录
    '/user/info', // 获取用户信息
  ],
  iconfontUrl: [],
  notFoundComponent: '@/pages/404',
};

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

# 路由入口配置文件

admin-antd-react 独立出了一个路由入口配置文件 @/config/routes.ts，其目的主要是：统一引入@/layouts下不同layout的路由，集中处理重新格式化路由。

目前 @/config/routes.ts 的内容为：

import { RoutesDataItem, umiRoutes,  getNotFoundRoute } from '../src/utils/routes';

/**
 * User Layout 路由页面
 */
import UserLayoutRoutes from '../src/layouts/UserLayout/routes';

/**
 * Index Layout 路由页面
 */
import IndexLayoutRoutes from '../src/layouts/IndexLayout/routes';

/**
 * config routes 配置
 * docs: http://admin-antd-react.liqingsong.cc/guide/basis/router-and-menu.html
 */
export const routes: RoutesDataItem[] = [
  {
    title: '',
    path: '/user',
    component: '@/layouts/UserLayout',
    routes: [
      ...umiRoutes(UserLayoutRoutes, '/user', '/user'),
      {
        title: '',
        path: '/user',
        redirect: '/user/login',
      },
      getNotFoundRoute(),
    ],
  },
  {
    title: '',
    path: '/',
    component: '@/layouts/SecurityLayout',
    routes: [
      {
        title: '',
        path: '/',
        component: '@/layouts/IndexLayout',
        routes: [
          ...umiRoutes(IndexLayoutRoutes),
          {
            title: '',
            path: '/',
            redirect: '/home',
          },
          getNotFoundRoute(),
        ],
      },
      getNotFoundRoute(),
    ],
  },
  getNotFoundRoute(),
];
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

说明：

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

# UmiJs 配置

admin-antd-react 基于 UmiJs来进行构建，所以有个 UmiJs 配置文件 /.umirc.ts。

官方文档 (opens new window)

# 环境变量

admin-antd-react 基于 UmiJs来进行构建，所以有个环境变量配置文件 /.env。

官方文档 (opens new window)

# 扩展环境变量

因为 UmiJs 环境变量配置参数都是有其对应作用的，在实际的业务需求中，可能需要自定义添加环境变量，目前本项目中就新增了一个 API_HOST 环境变量。

自定义新增环境变量方法如下：

1、在 .env 文件中新增自己定义的变量名，如：API_HOST，.env 文件内容如下：

# 指定开发服务端口号，默认是 8000
PORT=8000

# api接口域名
API_HOST= /api
1
2
3
4
5

2、在 /.umirc.ts 文件中引用并配置，内容如下：

const { API_HOST } = process.env;

export default defineConfig({
  define: {
    API_HOST: API_HOST,
  },
});
1
2
3
4
5
6
7

3、因为本项目集成了 TypeScript, 所以你需要在 /typings.d.ts 文件中添加声明，内容如下：

// api接口域名
declare const API_HOST: string;
1
2

完成，如此你就可以使用自己自定义的环境变量了。

← 布局 →