乌米Umi3框架中，如何实现每个页面都有自己个性HTML文件?

在Umi3官方文档中，有一个配置项exportStatic需在配置文件（umirc.ts或config/config.ts）中设置，语法如下：

exportStatic
   Type: object

此配置项有三个参数，规范如下：
1. htmlSuffix：启用.html 后缀。
2. dynamicRoot：部署到任意路径。
3. extraRoutePaths：生成额外的路径页面，用法和场景见预渲染动态路由

Umi框架配置 html 的输出形式，默认只输出 index.html。如果需要预渲染，请开启 ssr 配置，常用来解决没有服务端情况下，页面的 SEO 和首屏渲染提速。如果开启 exportStatic，则会针对每个路由输出 html 文件。

举个例子，路由配置如下：

/
/users
/list

在不开启 exportStatic 时，输出：

- index.html

设置 exportStatic: {} 后，输出：

- index.html
- users/index.html
- list/index.html

设置 exportStatic: { htmlSuffix: true } 后，输出：

- index.html
- users.html
- list.html

若有 SEO的话需求，可开启 ssr 配置，在 umi build 后，会路由（除静态路由外）渲染成有具体内容的静态 html 页面，例如在配置文件（umirc.ts | config/config.ts）中有如下路由配置：

{

  routes: [

    {

      path: '/',

      component: '@/layouts/Layout',

      routes: [

        { path: '/', component: '@/pages/Index' },

        { path: '/bar', component: '@/pages/Bar' },

        { path: '/news', component: '@/pages/News' },

        { path: '/news/:id', component: '@/pages/NewsDetail' },

      ],

    },

  ];

}

设置 { ssr: {}, exportStatic: { } 后，且在编译后，生成如下产物：

- dist

  - umi.js
  - umi.css
  - index.html

  - bar
    - index.html

  - news
    - index.html
    - [id].html

考虑到预渲染后，大部分不会再用到 umi.server.js 服务端文件，构建完成后会删掉 umi.server.js  文件如果有调试、不删除 server 文件需求，可通过环境变量 RM_SERVER_FILE=none 来保留。

转载：码书网「链接」