UmiJS

发表于 更新于 分类于

umi 常用配置

umi 的配置主要是在.umirc.ts 文件里面进行配置

几个常用的配置：

hash

  • Type: boolean
  • Default: false

配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。

启用 hash 后，产物通常是这样，

  • dist
    • logo.sw892d.png
    • umi.df723s.js
    • umi.8sd8fw.css
    • index.html

注：

  • html 文件始终没有 hash

base

  • Type: string
  • Default: /

设置路由前缀，通常用于部署到非根目录。

比如，你有路由 / 和 /users，然后设置了 base 为 /foo/，那么就可以通过 /foo/ 和 /foo/users 访问到之前的路由。

history

  • Type: object
  • Default: { type: 'browser' }

配置 history 类型和配置项。

包含以下子配置项：

type，可选 browser、hash 和 memory
options，传给 create{{{ type }}}History 的配置项，每个类型器的配置项不同

注意:

  • options 中，getUserConfirmation 由于是函数的格式，暂不支持配置
  • options 中，basename 无需配置，通过 umi 的 base 配置指定

outputPath

  • Type: string
  • Default: dist

指定输出路径。

注意：

不允许设定为 src、public、pages、mock、config 等约定目录

publicPath

  • Type: publicPath
  • Default: /

配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以。如果使用一些特殊的文件系统，比如混合开发或者 cordova 等技术，可以尝试将 publicPath 设置成 ./ 相对路径。

相对路径 ./ 有一些限制，例如不支持多层路由 /foo/bar，只支持单层路径 /foo

如果你的应用部署在域名的子路径上，例如 https://www.your-app.com/foo/，你需要设置 publicPath 为 /foo/，如果同时要兼顾开发环境正常调试，你可以这样配置：

1
2
3
4
import { defineConfig } from "umi";
export default defineConfig({
  publicPath: process.env.NODE_ENV === "production" ? "/foo/" : "/"
});

title

  • Type: string
  • Default: ''

配置标题。

比如：

1
2
3
export default {
  title: "hi"
};

此外，你还可以针对路由配置标题，比如，

1
2
3
4
5
6
7
8
export default {
  title: "hi",
  routes: [
    { path: "/", title: "Home" },
    { path: "/users", title: "Users" },
    { path: "/foo" }
  ]
};

然后我们访问 / 标题是 Home，访问 /users 标题是 Users，访问 /foo 标题是默认的 hi。

注意：

默认不会在 HTML 里输出 <title> 标签，通过动态渲染得到
配 exportStatic 后会为每个 HTML 输出 <title> 标签
如果需要自行通过 react-helmet 等方式渲染 title，配 title: false 可禁用内置的 title 渲染机制

proxy

  • Type: object
  • Default: {}

配置代理能力。

1
2
3
4
5
6
7
8
9
export default {
  proxy: {
    "/api": {
      target: "http://jsonplaceholder.typicode.com/",
      changeOrigin: true,
      pathRewrite: { "^/api": "" }
    }
  }
};

然后访问 /api/users 就能访问到 http://jsonplaceholder.typicode.com/users 的数据。

注意：

proxy 配置仅在 dev 时生效。

ssr (3.2+)

  • Type: object
  • Default: false

配置是否开启服务端渲染，配置如下：

1
2
3
4
5
6
7
8
9
10
11
{
  // 一键开启
  ssr: {
    // 更多配置
    // forceInitial: false,
    // removeWindowInitialProps: false
    // devServerRender: true,
    // mode: 'string',
    // staticMarkup: false,
  }
}

配置说明：

  • forceInitial：客户端渲染时强制执行 getInitialProps 方法，常见的场景：静态站点希望每次访问时保持数据最新，以客户端渲染为主。
  • removeWindowInitialProps: HTML 中移除 window.getInitialProps 变量，避免 HTML 中有大量数据影响 SEO 效果，场景：静态站点
  • devServerRender：在 umi dev 开发模式下，执行渲染，用于 umi SSR 项目的快速开发、调试，服务端渲染效果所见即所得，同时我们考虑到可能会与服务端框架（如 Egg.js、Express、Koa）结合做本地开发、调试，关闭后，在 umi dev 下不执行服务端渲染，但会生成 umi.server.js（Umi SSR 服务端渲染入口文件），渲染开发流程交由开发者处理。
  • mode：渲染模式，默认使用 string 字符串渲染，同时支持流式渲染 mode: ‘stream’，减少 TTFB（浏览器开始收到服务器响应数据的时间） 时长。
    staticMarkup：html 上的渲染属性（例如 React 渲染的 data-reactroot），常用于静态站点生成的场景上。

注意：

开启后，执行 umi dev 时，访问 http://localhost:8000 ，默认将单页应用（SPA）渲染成 html 片段，片段可以通过开发者工具『显示网页源代码』进行查看。

执行 umi build，产物会额外生成 umi.server.js 文件，此文件运行在 Node.js 服务端，用于做服务端渲染，渲染 html 片段。

如果应用没有 Node.js 服务端，又希望生成 html 片段做 SEO（搜索引擎优化），可以开启 exportStatic 配置，会在执行 umi build 构建时进行预渲染。

removeWindowInitialProps 与 forceInitial 不可同时使用