当前位置: 首页 > news >正文

部署--UmiJS

默认方案

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

不输出 html 文件

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

$ HTML=none umi build

部署 html 到非根目录

经常有同学问这个问题:

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

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

怎么解决?

可通过配置 base 解决。

export default {base: '/path/to/your/app/root',
};

使用 hashHistory

可通过配置 history 为 hash 为解决。

export default {history: 'hash',
};

按需加载

要实现按需加载,需装载 umi-plugin-react 插件并配置 dynamicImport。

export default {plugins: [['umi-plugin-react', {dynamicImport: true,}],],
};

静态资源在非根目录或 cdn

这时,就需要配置 publicPath

export default {publicPath: "http://yourcdn/path/to/static/"
}

使用 runtime 的 publicPath

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

export default {runtimePublicPath: true,
};

然后在 html 里输出:

<script>
window.publicPath = <%= YOUR PUBLIC_PATH %>
</script>

静态化

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

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

export default {exportStatic: {},
}

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

./dist
├── index.html
├── list
│   └── index.html
└── static├── pages__index.5c0f5f51.async.js├── pages__list.f940b099.async.js├── umi.2eaebd79.js└── umi.f4cb51da.css

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

HTML 后缀

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

├── index.html
├── list
│   └── index.html

而是生成,

├── index.html
└── list.html

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

export default {exportStatic: {htmlSuffix: true,},
}

umi build 会生成,

./dist
├── index.html
├── list.html
└── static├── pages__index.5c0f5f51.async.js├── pages__list.f940b099.async.js├── umi.2924fdb7.js└── umi.cfe3ffab.css

静态化后输出到任意路径

export default {exportStatic: {htmlSuffix: true,dynamicRoot: true,},
}
http://www.lryc.cn/news/445222.html

相关文章:

  • python自学笔记
  • Ubuntu磁盘不足扩容
  • 【ROS2】spin、spinOnce、spin_some、spin_until_future_complete
  • 化繁为简:中介者模式如何管理复杂对象交互
  • 控制STM32蜂鸣器示例代码(江科大)
  • Java基础知识扫盲
  • ZLMediaKit Windows编译以及使用
  • 基于YOLOv5s的无人机航拍输电线瓷瓶检测(附数据集与操作步骤)
  • 【Python百日进阶-Web开发-FastAPI】Day805 - FastAPI的请求体
  • 【Kubernetes】常见面试题汇总(二十八)
  • 单ISP与双ISP的区别是什么
  • 【linux】gcc makefile
  • 12.Java基础概念-面向对象-static
  • 移动开发(三):使用.NET MAUI打包第一个安卓APK完整过程
  • 数据库中的DUAL表
  • 寄宿制学校自闭症教育:为每个孩子创造奇迹
  • Vue前端无法接收到后端返回的数据以及全局CSS样式影响(已解决)
  • 力扣234 回文链表 Java版本
  • 银行性能测试怎么做?来认识下这4个性能测试工具!
  • FME学习笔记
  • 机器翻译之创建Seq2Seq的编码器、解码器
  • 锤炼核心技能以应对编程革命
  • 2024 go-zero社交项目实战
  • js跑马灯效果、横向、纵向滚动效果
  • C#基础(14)冒泡排序
  • 喜报 | 众数信科荣获2024年“火炬瞪羚企业”称号
  • 中央企业数智化薪酬信息系统建设如何实现穿透式监管?
  • 110Redis 简明教程--Redis 数据类型
  • Spring Data Rest 远程命令执行命令(CVE-2017-8046)
  • 计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-18