UmiJS 3.X实战从头开始（三）：配置与运行时配置

1. 配置

首先，我们前面提到过，Umi 的配置在 .umirc.ts 或 config/config.ts (二选一，.umirc.ts 优先级更高)文件中。配置按约定进行，例如，需要适用 AntDesign 布局的话，就设置 layout 配置，需要多语言配置，就设置 locale :

  layout: {
    name: 'Ant Design'
  },
  locale: {
    default: 'zh-CN'
  },

2. 本地临时配置

可以新建 .umirc.local.ts，这份配置会和 .umirc.ts 做 deep merge 后形成最终配置。

注：.umirc.local.ts 仅在 umi dev 时有效。umi build 时不会被加载。

需要注意以下几点：

• config/config.ts 对应的是 config/config.local.ts
• .local.ts 是本地验证使用的临时配置，请将其添加到 .gitignore，务必不要提交到 git 仓库中
• .local.ts 配置的优先级最高，比 UMI_ENV 指定的配置更高

3. 运行时配置

配置文件： src/app.tsx
运行时配置，也就是说这里配置的内容，是在浏览器运行时的配置，因此这个配置文件不能引入node依赖包（node依赖包是前端发布时引用的，运行时配置不参与发布）。

通过运行时配置，可以 修改覆盖，或者 补充 框架中的默认配置内容。

运行时配置可选的配置项如下：

• modifyClientRenderOpts(fn)

修改 clientRender 参数。

比如在微前端里动态修改渲染根节点：

let isSubApp = false;

export function modifyClientRenderOpts(memo) {

 return {

     ...memo,

     rootElement: isSubApp ? 'sub-root' : memo.rootElement, 

 };

}

• patchRoutes({ routes })

修改路由。

比如在最前面添加一个 /foo 路由，

export function patchRoutes({ routes }) {

     routes.unshift({

     path: '/foo',

     exact: true,

     component: require('@/extraRoutes/foo').default,

 });

}

比如和 render 配置配合使用，请求服务端根据响应动态更新路由，

let extraRoutes;

export function patchRoutes({ routes }) {

 merge(routes, extraRoutes);

}

export function render(oldRender) {

 fetch('/api/routes').then(res=>res.json()).then((res) => { 

     extraRoutes = res.routes;

     oldRender();

 })

}

注意：直接修改routes，不需要返回

• render(oldRender: Function)

覆写 render。

比如用于渲染之前做权限校验，

import { history } from 'umi';

export function render(oldRender) {

 fetch('/api/auth').then(auth => {

     if (auth.isLogin) { oldRender() }

     else { 

         history.push('/login'); 

         oldRender()

     }

 });

}

• onRouteChange({ routes, matchedRoutes, location, action })

在初始加载和路由切换时做一些事情。

比如用于做埋点统计，

export function onRouteChange({ location, routes, action }) {

 bacon(location.pathname);

}

比如用于设置标题，

export function onRouteChange({ matchedRoutes }) {

 if (matchedRoutes.length) {

    document.title = matchedRoutes[matchedRoutes.length - 1].route.title || '';

 }

}

• rootContainer(LastRootContainer, args)

修改交给 react-dom 渲染时的根组件。

比如用于在外面包一个 Provider，

export function rootContainer(container) {

 return React.createElement(ThemeProvider, null, container);

}

args 包含：

• routes，全量路由配置
• plugin，运行时插件机制
• history，history 实例

Umi 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

---

上一篇：UmiJS 3.X实战从头开始（二）：如何使用
下一篇：UmiJS 3.X实战从头开始（四）：配置式路由与约定式路由