umi不输出html文件,部署 - UmiJS 中文文档
默认方案
umi@2 默认对新手友好,所以默认不做按需加载处理,umi build 后输出 index.html、umi.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。至于 publicPath 是啥?具体看 webpack 文档,把他指向静态资源(js、css、图片、字体等)所在的路径。
export default {
publicPath: "http://yourcdn/path/to/static/"
}
使用 runtime 的 publicPath
对于需要在 html 里管理 publicPath 的场景,比如在 html 里判断环境做不同的输出,可通过配置 runtimePublicPath 为解决。
export default {
runtimePublicPath: true,
};
然后在 html 里输出:
window.publicPath =
静态化
在一些场景中,无法做服务端的 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,
},
}
umi不输出html文件,部署 - UmiJS 中文文档相关推荐
- ASP.NET Core 中文文档 第三章 原理(3)静态文件处理
原文:Working with Static Files 作者:Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay).孟帅洋(书缘) 静态文 ...
- aspose excel中文文档_除了VBA,还有哪些编程语言可以操作Excel文件?
Excel(Microsoft office)是现在最常用的办公软件,主要涉及电子表格制作.数据处理.报表输出展示以及更高端的还有金融建模等:我们知道,在需要批处理多个Excel工作表以及工作簿的时候 ...
- thinkjs能在浏览器html文件,thinkjs框架的默认模板引擎Nunjucks的中文文档
Node 端使用 $ npm install nunjucks 0 $npminstallnunjucks 下载后可直接 require('nunjucks') 使用 浏览器端使用 可直接使用 nun ...
- python-docx中文文档之文件类
python-docx中文文档之文档类 文章目录 python-docx中文文档之文档类 ###文档类 这是一篇推荐的入门文章:python-docx 使用教程 官方的文档在这里. ###文档类 文档 ...
- springboot中文文档_登顶 Github 的 Spring Boot 仓库!艿艿写的最肝系列
源码精品专栏 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络应用框架 Netty 源码解析 消息中间件 RocketMQ 源码解析 数据库中间件 Sharding-JDBC 和 My ...
- 使用编译器——Solidity中文文档(8)
写在前面:HiBlock区块链社区成立了翻译小组,翻译区块链相关的技术文档及资料,本文为Solidity文档翻译的第八部分<使用编译器>,特发布出来邀请solidity爱好者.开发者做公开 ...
- Spring Boot中文文档
1.5.2.RELEASE Part I. Spring Boot 文档 本节简要介绍了Spring Boot文档,是整个文档的参考指南. 您可以完整阅读本参考指南,或者如果您不感兴趣的话可以跳过该部 ...
- kafka中文文档(0.10.0)
kafka中文文档(0.10.0) 作者:链上研发-老杨叔叔 时间:2016-07-22 版本:Apache Kafka 0.10.0 (2016年5月底发布) .目录 kafka中文文档0100 目 ...
- Spring Cloud Dalston.RELEASE中文文档
Spring Cloud Dalston.RELEASE中文文档 Spring Cloud 目录 特性 云原生应用程序 Spring Cloud上下文:应用程序上下文服务 引导应用程序上下文 应用程序 ...
最新文章
- php 构造骚扰短信发送机(仅供学习与参考,请勿用于非法用途)
- android 服务是什么问题,Android Studio 中的Service问题
- Windows域控管理 常用操作 详细汇总
- Python3 类(2)
- mugen linux主程序,MUGEN主程序
- jboss-remoting服务
- Esp8266+ssd1306液晶屏+microPython
- C语言:房贷计算器(等额本息与等额本金对比计算器)
- 用JS搞了一个自动翻译,从此不再头疼看英文书了
- QT 图片背景色像素处理法
- 云计算与大数据平台课堂作业
- 分销系统具有哪些大优势?
- ST-Link 转JLink
- try-resources
- 银行核心系统:“交易(Transaction)”是什么?
- sd卡计算机接口,sd卡怎么插电脑上
- 【安装官方版本】安装Office
- 输入三个实数,判断能否以它们为边长构成三角形。若能,输出三角形的面积,否者输出提示信息
- ERROR: The Nouveau kernel driver is currently in use by your system;新电脑安装NVIDIA的GPU驱动报错问题解决
- 用python画爱心表白代码
热门文章
- golang error类型详解
- Nmap源码分析(基本框架)
- linux tar打包压缩排除某个目录或文件
- 深入解析Linux中的fork函数
- javascript页面登录代码_自己动手做一个很酷的登录页面
- 新手坐高铁怎么找车厢_一女子坐高铁回桂平坐过站,到了平南南站,怎么办?...
- php语言smtp类,php mailer类调用远程SMTP服务器发送邮件实现方法
- Linux的默认给home分配多少,Linux 分配/home的磁盘空间给根目录
- drupal与html转换,Drupal 7修改網頁HTML和顯示Title的辦法
- 做自适应网站专业乐云seo_乐云分享新站SEO优化实践经验,收录和排名持续稳定上升方...