umi的html文件在nodemoudle中,因此如果需要修改html则需要修改配置
默认模板
image.png

1.修改配置

. 新建src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板，比如

  1. <html>
  2. <head>
  3.   <meta charset="utf-8" />
  4.   <title>Your App</title>
  5. </head>
  6. <body>
  7.     <h1>自定义模板</h1>
  8.   <div id="root"></div>
  9. </body>
  10. </html>

模板里可通过 context 来获取到 umi 提供的变量，context 包含：

  • route，路由信息，需要打包出多个静态 HTML 时（即配置了 exportStatic 时）有效
  • config，用户配置信息

比如：

2.案例

  1. <html>
  2. <head>
  3.   <meta charset="utf-8" />
  4.   <title>Your App</title>
  5. </head>
  6. <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css">
  7. <body>
  8.     <h1>自定义模板</h1>
  9.     <button class="btn btn-success">bosdd</button>
  10.   <div id="root"></div>
  11. </body>
  12. </html>