部署

默认方案

Umi 默认对新手友好,所以默认不做按需加载处理,umi build 后输出 index.htmlumi.jsumi.css 三个文件。

不输出 html 文件

某些场景 html 文件交给后端输出,前端构建并不需要输出 html 文件,可配置环境变量 HTML=none 实现。

  1. $ HTML=none umi build

部署 html 到非根目录

经常有同学问这个问题:

为什么我本地开发是好的,部署后就没反应了,而且没有报错?

没有报错! 这是应用部署在非根路径的典型现象。为啥会有这个问题?因为路由没有匹配上,比如你把应用部署在 /xxx/ 下,然后访问 /xxx/hello,而代码里匹配的是 /hello,那就匹配不上了,而又没有定义 fallback 的路由,比如 404,那就会显示空白页。

怎么解决?

可通过配置 base 解决。

  1. export default {
  2. base: '/path/to/your/app/root',
  3. };

使用 hash history

可通过配置 historyhash 为解决。

  1. export default {
  2. history: { type: 'hash' },
  3. };

按需加载

要实现按需加载,需配置 dynamicImport

  1. export default {
  2. dynamicImport: {},
  3. };

静态资源在非根目录或 cdn

这时,就需要配置 publicPath。至于 publicPath 是啥?具体看 webpack 文档,把他指向静态资源(js、css、图片、字体等)所在的路径。

  1. export default {
  2. publicPath: "http://yourcdn/path/to/static/"
  3. }

使用 runtime 的 publicPath

对于需要在 html 里管理 publicPath 的场景,比如在 html 里判断环境做不同的输出,可通过配置 runtimePublicPath 为解决。

  1. export default {
  2. runtimePublicPath: true,
  3. };

然后在 html 里输出:

  1. <script>
  2. window.publicPath = <%= YOUR PUBLIC_PATH %>
  3. </script>

静态化

在一些场景中,无法做服务端的 html fallback,即让每个路由都输出 index.html 的内容,那么就要做静态化。

比如上面的例子,我们在 .umirc.js 里配置:

  1. export default {
  2. exportStatic: {},
  3. }

然后执行 umi build,会为每个路由输出一个 html 文件。

  1. ./dist
  2. ├── index.html
  3. ├── list
  4. └── index.html
  5. └── static
  6. ├── pages__index.5c0f5f51.async.js
  7. ├── pages__list.f940b099.async.js
  8. ├── umi.2eaebd79.js
  9. └── umi.f4cb51da.css

注意:静态化暂不支持有变量路由的场景。

HTML 后缀

有些静态化的场景里,是不会自动读索引文件的,比如支付宝的容器环境,那么就不能生成这种 html 文件,

  1. ├── index.html
  2. ├── list
  3. └── index.html

而是生成,

  1. ├── index.html
  2. └── list.html

配置方式是在 .umirc.js 里,

  1. export default {
  2. exportStatic: {
  3. htmlSuffix: true,
  4. },
  5. }

umi build 会生成,

  1. ./dist
  2. ├── index.html
  3. ├── list.html
  4. └── static
  5. ├── pages__index.5c0f5f51.async.js
  6. ├── pages__list.f940b099.async.js
  7. ├── umi.2924fdb7.js
  8. └── umi.cfe3ffab.css

静态化后输出到任意路径

  1. export default {
  2. exportStatic: {
  3. htmlSuffix: true,
  4. dynamicRoot: true,
  5. },
  6. }