当前位置： 首页 > article >正文

【Ant Design Pro】1. config 配置

article 2024/12/3 6:43:47

前置说明

这里我使用的是 simple 版本，并结合 antd pro 脚手架搭建（现在默认使用为 umi4 版本）：

在这里插入图片描述

虽然这个文档好像已经好久没有更新了。

config 文件：

在这里插入图片描述

config.ts

// https://umijs.org/config/
import { defineConfig } from '@umijs/max';
import { join } from 'path';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';

// env 可以 .env 配置 也可以 cross-env 配置
const { REACT_APP_ENV = 'dev', NODE_ENV } = process.env;

export default defineConfig({
  /**
   * @name 开启 hash 模式
   * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
   * @doc https://umijs.org/docs/api/config#hash
   */
  hash: true,
  /**
   * @name 兼容性设置
   * @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖
   * @doc https://umijs.org/docs/api/config#targets
   */
  // targets: {
  //   ie: 11,
  // },
  /**
   * @name 路由的配置，不在路由中引入的文件不会编译
   * @description 只支持 path，component，routes，redirect，wrappers，title 的配置
   * @doc https://umijs.org/docs/guides/routes
   */
  // umi routes: https://umijs.org/docs/routing
  routes,
  /**
   * @name 主题的配置
   * @description 虽然叫主题，但是其实只是 less 的变量设置
   * @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
   * @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
   */
  theme: {
    // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
    // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
    'root-entry-name': 'variable',
  },
  /**
   * @name 标题
   * @doc https://umijs.org/docs/api/config#title
   */
  title: 'Ant Design Pro',
  /**
   * @name 路由模式
   * @doc https://umijs.org/docs/api/config#history
   */
  history: {
    type: 'browser',
  },
  /**
   * @name 开发环境使用 sourcemap
   * @doc https://umijs.org/docs/api/config#devtool
   */
  devtool: NODE_ENV === 'development' ? 'source-map' : false,
  /**
   * @name moment 的国际化配置
   * @description 如果对国际化没有要求，打开之后能减少js的包大小
   * @doc https://umijs.org/docs/api/config#ignoremomentlocale
   */
  ignoreMomentLocale: true,
  /**
   * @name 代理配置
   * @description 可以让你的本地服务器代理到你的服务器上，这样你就可以访问服务器的数据了
   * @see 要注意以下 代理只能在本地开发时使用，build 之后就无法使用了。
   * 这里的 proxy 是 proxy.ts 文件 表示 key 值(REACT_APP_ENV)为环境变量，value 值为代理地址。
   * @doc 代理介绍 https://umijs.org/docs/guides/proxy
   * @doc 代理配置 https://umijs.org/docs/api/config#proxy
   */
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  /**
   * @name 快速热更新配置
   * @description 一个不错的热更新组件，更新时可以保留 state
   */
  fastRefresh: true,
  //============== 以下都是max的插件配置 ===============
  /**
   * @name 数据流插件
   * @@doc https://umijs.org/docs/max/data-flow
   */
  model: {},
  /**
   * 一个全局的初始数据流，可以用它在插件之间共享数据
   * @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
   */
  initialState: {},
  /**
   * @name layout 插件
   * @doc https://umijs.org/docs/max/layout-menu
   */
  layout: {
    locale: true,
    // 布局默认设置文件
    ...defaultSettings,
  },
  /**
   * @name moment2dayjs 插件
   * @description 将项目中的 moment 替换为 dayjs
   * @doc https://umijs.org/docs/max/moment2dayjs
   */
  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration'],
  },
  /**
   * @name 国际化插件
   * @doc https://umijs.org/docs/max/i18n
   */
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  /**
   * @name antd 插件
   * @description 内置了 babel import 插件
   * @doc https://umijs.org/docs/max/antd#antd
   */
  antd: {},
  /**
   * @name 网络请求配置
   * @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
   * @doc https://umijs.org/docs/max/request
   */
  request: {},
  /**
   * @name 权限插件
   * @description 基于 initialState 的权限插件，必须先打开 initialState
   * @doc https://umijs.org/docs/max/access
   */
  access: {},
  /**
   * @name <head> 中额外的 script
   * @description 配置 <head> 中额外的 script
   */
  headScripts: [
    // 解决首次加载时白屏的问题
    { src: '/scripts/loading.js', async: true },
  ],
  //================ pro 插件配置 =================
  presets: ['umi-presets-pro'],
  /**
   * @name openAPI 插件的配置
   * @description 基于 openapi 的规范生成serve 和mock，能减少很多样板代码
   * @doc https://pro.ant.design/zh-cn/docs/openapi/
   */
  openAPI: [
    {
      requestLibPath: "import { request } from '@umijs/max'",
      // 或者使用在线的版本
      // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
      schemaPath: join(__dirname, 'oneapi.json'),
      mock: false,
    },
    {
      requestLibPath: "import { request } from '@umijs/max'",
      schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
      projectName: 'swagger',
    },
  ],
  mfsu: {
    strategy: 'normal',
  },
  esbuildMinifyIIFE: true,
  requestRecord: {},
});

defaultSettings.ts

布局的默认设置

import { ProLayoutProps } from '@ant-design/pro-components';

/**
 * @name
 */
const Settings: ProLayoutProps & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  colorPrimary: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: 'Ant Design Pro',
  pwa: true,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
  token: {
    // 参见ts声明，demo 见文档，通过token 修改样式
    //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
  },
};

export default Settings;

oneapi.json

mock 的一套接口文档。

{
  "openapi": "3.0.1",
  "info": {
    "title": "Ant Design Pro",
    "version": "1.0.0"
  },
  "servers": [
    {
      "url": "http://localhost:8000/"
    },
    {
      "url": "https://localhost:8000/"
    }
  ],
  "paths": {
    "/api/currentUser": {
      "get": {
        "tags": ["api"],
        "description": "获取当前的用户",
        "operationId": "currentUser",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/CurrentUser"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "x-swagger-router-controller": "api"
    },
    "/api/login/captcha": {
      "post": {
        "description": "发送验证码",
        "operationId": "getFakeCaptcha",
        "tags": ["login"],
        "parameters": [
          {
            "name": "phone",
            "in": "query",
            "description": "手机号",
            "schema": {
              "type": "string"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/FakeCaptcha"
                }
              }
            }
          }
        }
      }
    },
    "/api/login/outLogin": {
      "post": {
        "description": "登录接口",
        "operationId": "outLogin",
        "tags": ["login"],
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "x-swagger-router-controller": "api"
    },
    "/api/login/account": {
      "post": {
        "tags": ["login"],
        "description": "登录接口",
        "operationId": "login",
        "requestBody": {
          "description": "登录系统",
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/LoginParams"
              }
            }
          },
          "required": true
        },
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/LoginResult"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        },
        "x-codegen-request-body-name": "body"
      },
      "x-swagger-router-controller": "api"
    },
    "/api/notices": {
      "summary": "getNotices",
      "description": "NoticeIconItem",
      "get": {
        "tags": ["api"],
        "operationId": "getNotices",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/NoticeIconList"
                }
              }
            }
          }
        }
      }
    },
    "/api/rule": {
      "get": {
        "tags": ["rule"],
        "description": "获取规则列表",
        "operationId": "rule",
        "parameters": [
          {
            "name": "current",
            "in": "query",
            "description": "当前的页码",
            "schema": {
              "type": "number"
            }
          },
          {
            "name": "pageSize",
            "in": "query",
            "description": "页面的容量",
            "schema": {
              "type": "number"
            }
          }
        ],
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/RuleList"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "post": {
        "tags": ["rule"],
        "description": "新建规则",
        "operationId": "addRule",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/RuleListItem"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "put": {
        "tags": ["rule"],
        "description": "新建规则",
        "operationId": "updateRule",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/RuleListItem"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "delete": {
        "tags": ["rule"],
        "description": "删除规则",
        "operationId": "removeRule",
        "responses": {
          "200": {
            "description": "Success",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object"
                }
              }
            }
          },
          "401": {
            "description": "Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      },
      "x-swagger-router-controller": "api"
    },
    "/swagger": {
      "x-swagger-pipe": "swagger_raw"
    }
  },
  "components": {
    "schemas": {
      "CurrentUser": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string"
          },
          "avatar": {
            "type": "string"
          },
          "userid": {
            "type": "string"
          },
          "email": {
            "type": "string"
          },
          "signature": {
            "type": "string"
          },
          "title": {
            "type": "string"
          },
          "group": {
            "type": "string"
          },
          "tags": {
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "key": {
                  "type": "string"
                },
                "label": {
                  "type": "string"
                }
              }
            }
          },
          "notifyCount": {
            "type": "integer",
            "format": "int32"
          },
          "unreadCount": {
            "type": "integer",
            "format": "int32"
          },
          "country": {
            "type": "string"
          },
          "access": {
            "type": "string"
          },
          "geographic": {
            "type": "object",
            "properties": {
              "province": {
                "type": "object",
                "properties": {
                  "label": {
                    "type": "string"
                  },
                  "key": {
                    "type": "string"
                  }
                }
              },
              "city": {
                "type": "object",
                "properties": {
                  "label": {
                    "type": "string"
                  },
                  "key": {
                    "type": "string"
                  }
                }
              }
            }
          },
          "address": {
            "type": "string"
          },
          "phone": {
            "type": "string"
          }
        }
      },
      "LoginResult": {
        "type": "object",
        "properties": {
          "status": {
            "type": "string"
          },
          "type": {
            "type": "string"
          },
          "currentAuthority": {
            "type": "string"
          }
        }
      },
      "PageParams": {
        "type": "object",
        "properties": {
          "current": {
            "type": "number"
          },
          "pageSize": {
            "type": "number"
          }
        }
      },
      "RuleListItem": {
        "type": "object",
        "properties": {
          "key": {
            "type": "integer",
            "format": "int32"
          },
          "disabled": {
            "type": "boolean"
          },
          "href": {
            "type": "string"
          },
          "avatar": {
            "type": "string"
          },
          "name": {
            "type": "string"
          },
          "owner": {
            "type": "string"
          },
          "desc": {
            "type": "string"
          },
          "callNo": {
            "type": "integer",
            "format": "int32"
          },
          "status": {
            "type": "integer",
            "format": "int32"
          },
          "updatedAt": {
            "type": "string",
            "format": "datetime"
          },
          "createdAt": {
            "type": "string",
            "format": "datetime"
          },
          "progress": {
            "type": "integer",
            "format": "int32"
          }
        }
      },
      "RuleList": {
        "type": "object",
        "properties": {
          "data": {
            "type": "array",
            "items": {
              "$ref": "#/components/schemas/RuleListItem"
            }
          },
          "total": {
            "type": "integer",
            "description": "列表的内容总数",
            "format": "int32"
          },
          "success": {
            "type": "boolean"
          }
        }
      },
      "FakeCaptcha": {
        "type": "object",
        "properties": {
          "code": {
            "type": "integer",
            "format": "int32"
          },
          "status": {
            "type": "string"
          }
        }
      },
      "LoginParams": {
        "type": "object",
        "properties": {
          "username": {
            "type": "string"
          },
          "password": {
            "type": "string"
          },
          "autoLogin": {
            "type": "boolean"
          },
          "type": {
            "type": "string"
          }
        }
      },
      "ErrorResponse": {
        "required": ["errorCode"],
        "type": "object",
        "properties": {
          "errorCode": {
            "type": "string",
            "description": "业务约定的错误码"
          },
          "errorMessage": {
            "type": "string",
            "description": "业务上的错误信息"
          },
          "success": {
            "type": "boolean",
            "description": "业务上的请求是否成功"
          }
        }
      },
      "NoticeIconList": {
        "type": "object",
        "properties": {
          "data": {
            "type": "array",
            "items": {
              "$ref": "#/components/schemas/NoticeIconItem"
            }
          },
          "total": {
            "type": "integer",
            "description": "列表的内容总数",
            "format": "int32"
          },
          "success": {
            "type": "boolean"
          }
        }
      },
      "NoticeIconItemType": {
        "title": "NoticeIconItemType",
        "description": "已读未读列表的枚举",
        "type": "string",
        "properties": {},
        "enum": ["notification", "message", "event"]
      },
      "NoticeIconItem": {
        "type": "object",
        "properties": {
          "id": {
            "type": "string"
          },
          "extra": {
            "type": "string",
            "format": "any"
          },
          "key": { "type": "string" },
          "read": {
            "type": "boolean"
          },
          "avatar": {
            "type": "string"
          },
          "title": {
            "type": "string"
          },
          "status": {
            "type": "string"
          },
          "datetime": {
            "type": "string",
            "format": "date"
          },
          "description": {
            "type": "string"
          },
          "type": {
            "extensions": {
              "x-is-enum": true
            },
            "$ref": "#/components/schemas/NoticeIconItemType"
          }
        }
      }
    }
  }
}

proxy.ts

所有代理的配置。

/**
 * @name 代理的配置
 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * -------------------------------
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 *
 * @doc https://umijs.org/docs/guides/proxy
 */
export default {
  // 如果需要自定义本地开发服务器  请取消注释按需调整
  // dev: {
  //   // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
  //   '/api/': {
  //     // 要代理的地址
  //     target: 'https://preview.pro.ant.design',
  //     // 配置了这个可以从 http 代理到 https
  //     // 依赖 origin 的功能可能需要这个，比如 cookie
  //     changeOrigin: true,
  //   },
  // },

  /**
   * @name 详细的代理配置
   * @doc https://github.com/chimurai/http-proxy-middleware
   */
  test: {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/api/': {
      target: 'https://proapi.azurewebsites.net',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

routes.ts

路由表。

/**
 * @name umi 的路由配置
 * @description 只支持 path,component,routes,redirect,wrappers,name,icon 的配置
 * @param path  path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
 * @param component 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
 * @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
 * @param redirect 配置路由跳转
 * @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
 * @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
 * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
 * @doc https://umijs.org/docs/guides/routes
 */
export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: './User/Login',
      },
    ],
  },
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'smile',
    component: './Welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    icon: 'crown',
    access: 'canAdmin',
    routes: [
      {
        path: '/admin',
        redirect: '/admin/sub-page',
      },
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        component: './Admin',
      },
    ],
  },
  {
    name: 'list.table-list',
    icon: 'table',
    path: '/list',
    component: './TableList',
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    path: '*',
    layout: false,
    component: './404',
  },
];

http://www.kler.cn/a/417613.html

相关文章：

  • 华为关键词覆盖应用市场ASO优化覆盖技巧
  • （免费送源码）计算机毕业设计原创定制：Java+ssm+JSP+Ajax SSM棕榈校园论坛的开发
  • 如何在 VPS 上使用 Git 设置自动部署
  • linux常用指令都是工作中遇到的
  • JAVAWeb之CSS学习
  • 【操作文档】mysql分区操作步骤.docx
  • 实战ansible-playbook：Ansible Vault加密敏感数据(三)
  • 田忌赛马五局三胜问题matlab代码
  • 大模型训练核心技术RLHF
  • 关于扩散方程的解
  • 命令行应用开发初学者指南：脚手架篇、UI 库和交互工具
  • 【AI】Jetson Nano烧写SD卡镜像：Ubuntu20.04
  • Vue 2.0-＞3.0学习笔记（Vue 3 （五）- 新的组件）
  • 本地学习axios源码-如何在本地打印axios里面的信息
  • 如何构建一个可扩展、全球可访问的 GenAI 架构？
  • 回调函数知识点
  • python股票数据分析（Pandas）练习
  • IDEA Windows\Linux 快捷键
  • BP插件的首个Demo
  • transformers bert-base-uncased情感分析
  • jdk8没有Files.readString()
  • Refit 使用详解
  • 用MATLAB符号工具建立机器人的动力学模型
  • 抖店飞鸽客服自动化插件-自动回复或自动转接会话
  • Qt 中的 UiTools 详解
  • 智能堆叠，集群和IRF