umi icon indicating copy to clipboard operation
umi copied to clipboard

feat: 支持htmlSuffix、dynamicRoot

Open flgame opened this issue 8 months ago • 2 comments

公司好几个项目升级umi4.x需要用到,希望能支持 https://github.com/umijs/umi/issues/12301

  1. htmlSuffix: 会生成 xxx.html静态文件及路由,非xxx/index.html
  2. dynamicRoot: 可不用做任何修改部署在任意目录下

有一点需要说明的是
dynamicRoot 为新增配置,原publicPath: './'相对路径的方式也是有问题的,使用当前规则没问题。
对于dynamicRoot:true, htmlSuffix: false的场景,由于/page1 和 /page1/index.html 得到的相对路径不一样,但是又是同一个文件,对于headScripts等脚本路径是编译时确定的,没办法对前面两个路由同时生效。

  • { dynamicRoot:true, htmlSuffix: true }使用 /page1、/page1.html 访问

  • { dynamicRoot:true, htmlSuffix: false }使用 /page1/、/page1/index.html 访问

已添加examples/export-static项目,且测试以下场景都正常:
① 约定式路由,不开启 dynamicRoot 、不开启 htmlSuffix 。 ② 约定式路由,开启 dynamicRoot 、不开启 htmlSuffix 。 ③ 约定式路由,不开启 dynamicRoot 、开启 htmlSuffix 。 ④ 约定式路由,开启 dynamicRoot 、开启 htmlSuffix 。 ⑤ 配置式路由,不开启 dynamicRoot 、不开启 htmlSuffix 。 ⑥ 配置式路由,开启 dynamicRoot 、不开启 htmlSuffix 。 ⑦ 配置式路由,不开启 dynamicRoot 、开启 htmlSuffix 。 ⑧ 配置式路由,开启 dynamicRoot 、开启 htmlSuffix 。

使用Whistle测试,对应htmlSuffix: true配置:

^export-static.local/x/y/page1$ file:///home/user1/projects/umi/examples/export-static/dist/page1.html resCors://enable
^export-static.local/x/y/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1.html resCors://enable
export-static.local/x/y file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

^export-static.local/page1$ file:///home/user1/projects/umi/examples/export-static/dist/page1.html resCors://enable
^export-static.local/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1.html resCors://enable
export-static.local file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

htmlSuffix: false配置:

^export-static.local/x/y/page1/$ file:///home/user1/projects/umi/examples/export-static/dist/page1/index.html resCors://enable
^export-static.local/x/y/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1/index.html resCors://enable
export-static.local/x/y file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

^export-static.local/page1/$ file:///home/user1/projects/umi/examples/export-static/dist/page1/index.html resCors://enable
^export-static.local/page1/page1_1$ file:///home/user1/projects/umi/examples/export-static/dist/page1/page1_1/index.html resCors://enable
export-static.local file:///home/user1/projects/umi/examples/export-static/dist resCors://enable

之前的PR已关闭,感谢 @fz6m 的修改意见,详见:https://github.com/umijs/umi/pull/12400

Summary by CodeRabbit

  • 新功能

    • 添加了导出静态文件的配置,支持 HTML 后缀、动态根路径和哈希处理。
    • 新增了 404 页面和其他示例页面,包括主页、Page 1、Page 1-1。
  • 样式

    • 增加了 .bar 类的绿色背景样式。
    • 添加了 .foo.foo2.foo3 类的颜色、字体大小和字体粗细样式。
  • 文档

    • 更新了 package.json 文件,增加了构建、开发、设置和启动项目的脚本配置。

flgame avatar Jun 26 '24 09:06 flgame