Ant Design Pro 基本配置

1、更换 Ant Design Pro 的 logo 和名称

需要修改文件所在位置：/config/defaultSetting.js

const proSettings: DefaultSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: '青锋后台系统',
  pwa: false,
  iconfontUrl: '',
  menu: {
    locale: false,
  },
};

将其中的 title 改成公司的项目名称即可。

2、清除头部不必要的小组件

文件所在位置：src/components/GlobalHeader/RightContent.js

return (
    <div className={className}>
      {/* <HeaderSearch
        className={`${styles.action} ${styles.search}`}
        placeholder="站内搜索"
        defaultValue="umi ui"
        options={[
          { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
          {
            label: <a href="next.ant.design">Ant Design</a>,
            value: 'Ant Design',
          },
          {
            label: <a href="https://protable.ant.design/">Pro Table</a>,
            value: 'Pro Table',
          },
          {
            label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
            value: 'Pro Layout',
          },
        ]}
        // onSearch={value => {
        //   //console.log('input', value);
        // }}
      /> */}
      <Tooltip title="使用文档">
        <a
          style={{
            color: 'inherit',
          }}
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip>
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
      <SelectLang className={styles.action} />
    </div>
  );

HeaderSearch、Tooltip、NoticeIcon、HeaderDropdown、SelectLang 它们分别代表 “全局搜索”、”使用文档”、”消息通知框”、”用户信息”、”国际化切换”，将不需要的内容注释掉即可。

3、更换地址栏图标

文件所在位置：/public/favicon.ico
制作自己的地址图标进行替换即可。
在线制作ico图标地址：https://www.bitbug.net/
大家可以根据自己的实际情况制作自己的地址图标即可。
替换后依然没有起作用。这是有缓存的问题，解决办法：重启浏览器，或者重启一下本地服务器（npm start）即可。

4、配置代理服务

如果我们不再使用mock 中的预设数据，就须通过 API 向后端获取相关数据。这时会碰到一个棘手的问题—同源策略。跨域用通俗的讲，浏览器不能跨域名访问别的网站获取数据。目前有两种解决方案：
第一种方案：
跨域是存在浏览器与浏览器之间的。所以知道这层概念之后，我可以走这种流程：浏览器->本地服务器->远程服务器。Ant Design Pro 也暖心的帮我们提供了跨域的配置项，那我们在那里设置呢？
位置：/config/proxy.ts

/**
 * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * 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
 */
export default {
  dev: {
    '/api/': {
      target: 'http://localhost:8301',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
  test: {
    '/api/': {
      target: 'http://localhost:8301',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'http://localhost:8301',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
};

跨域问题，也可以在服务器后端解决的。
使用注解@CrossOrigin（局部跨域）

@Controller
@RequestMapping("/shop")
@CrossOrigin(originPatterns = "*", methods = {RequestMethod.GET, RequestMethod.POST})
public class ShopController {
    @GetMapping("/")
    @ResponseBody
    public Map<String, Object> findAll() {
        //返回数据
        return DataSchool.getStudents();
    }
}

5、关闭 Ant Design Pro 国际化

在我们配置菜单模块时，会时常遇到一个强大 Ant Design Pro 的功能—-国际化。但是如果不需要可以关闭掉。
文件所在位置：/src/defaultSetting.ts

const proSettings: DefaultSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  title: '青锋后台系统',
  pwa: false,
  iconfontUrl: '',
  menu: {
    locale: false,
  },
};

将 menu.disableLocal 的值改为：true ，即可关闭国际化配置。

6、调整打包JS的输出路径

在我们开发项目完成后，都会将打包后的文件，上传到服务器。但是有些情况下，我们需要对打包的输出路径。
文件所在位置：tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./src/.umi/*"]
    }
  },
  "include": [
    "mock/**/*",
    "src/**/*",
    "tests/**/*",
    "test/**/*",
    "__test__/**/*",
    "typings/**/*",
    "config/**/*",
    ".eslintrc.js",
    ".stylelintrc.js",
    ".prettierrc.js",
    "jest.config.js",
    "mock/*"
  ],
  "exclude": ["node_modules", "build", "dist", "scripts", "src/.umi/*", "webpack", "jest"]
}

7、修改底部页脚内容

修改文件所在位置：/src/layouts/BasicLayout.tsx

<DefaultFooter
    copyright={`${new Date().getFullYear()} 青锋后台管理系统`}
    links={[
      {
        key: '青锋官网',
        title: '青锋官网',
        href: 'https://xinlingge.cn:8181',
        blankTarget: true,
      },
      // {
      //   key: 'github',
      //   title: <GithubOutlined />,
      //   href: 'https://github.com/ant-design/ant-design-pro',
      //   blankTarget: true,
      // },
      {
        key: '在线预览',
        title: '在线预览',
        href: 'https://xinlingge.cn:8181/qingfeng',
        blankTarget: true,
      },
    ]}
  />