部署--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
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,},
}相关文章:
部署--UmiJS
默认方案 umi2 默认对新手友好,所以默认不做按需加载处理,umi build 后输出 index.html、umi.js 和 umi.css 三个文件。 不输出 html 文件 某些场景 html 文件交给后端输出,前端构建并不需要输出 html 文件,可配置环境变量 HTM…...
python自学笔记
python部分总结 主要记录的是python与之前学的语言的不同之处 函数总结 首字母大写: name.title() 删除右边空格(暂时):name.rstrip() 删除左边空格(暂时):name.lstrip() 删除前缀(暂时):name.removeprefi…...
Ubuntu磁盘不足扩容
1.问题 Ubuntu磁盘不足扩容 2.解决方法 安装一下 sudo apt-get install gpartedsudo gparted...
【ROS2】spin、spinOnce、spin_some、spin_until_future_complete
1、简述 spinOnce仅处理一个回调函数(ROS1); spin_some类似于ROS1的spinOnce,但处理多个任务,然后返回(ROS2); spin会持续处理回调函数直到无任务,然后阻塞(ROS1、ROS2); 注意: 只有消息推送(publisher)功能的程序,不需要使用spin_some(),因为它不执行任何回…...
化繁为简:中介者模式如何管理复杂对象交互
化繁为简:中介者模式如何管理复杂对象交互 中介者模式 是一种行为型设计模式,定义了一个中介者对象,来封装一组对象之间的交互。中介者模式通过将对象之间的交互行为从多个对象中抽离出来,集中封装在一个中介者对象中,…...
控制STM32蜂鸣器示例代码(江科大)
以下代码来源于本人学习江科大的课程,这是一个简单的STM32微控制器程序,用于控制连接到GPIOB第12号引脚的蜂鸣器。程序通过GPIOB的第12号引脚输出PWM波形来控制蜂鸣器的频率,从而产生声音。 #include "stm32f10x.h" …...
Java基础知识扫盲
目录 Arrays.sort的底层实现 BigDecimal(double)和BigDecimal(String)有什么区别 Char可以存储一个汉字吗 Java中的Timer定时调度任务是咋实现的 Java中的序列化机制是咋实现的 Java中的注解是干嘛的 Arrays.sort的底层实现 Arrays.sort是Java中提供的对数组进行排序的…...
ZLMediaKit Windows编译以及使用
1.运行ZLMediaKit 2.通过ffmpeg把视频源推流给ZLMediaKit 执行以下命令,将本地视频通过RTSP协议推流给ZLMediaKit。 ffmpeg -re -stream_loop -1 -i "D:\workplace\armgb\public\1.fileh264" -vcodec h264 -f rtsp rtsp://127.0.0.1/live/test 若想将本…...
基于YOLOv5s的无人机航拍输电线瓷瓶检测(附数据集与操作步骤)
本文主要内容:详细介绍了无人机航拍输电线瓷瓶检测的整个过程,从创建数据集到训练模型再到预测结果全部可视化操作与分析。 文末有数据集获取方式,请先看检测效果 现状 输电线路绝缘瓷瓶的检测主要依赖人工巡检。巡检人员需携带专业设备,攀…...
【Python百日进阶-Web开发-FastAPI】Day805 - FastAPI的请求体
文章目录 一、导入 Pydantic 的 BaseModel二、创建数据模型三、声明为参数四、结果五、自动化文档六、编辑器支持七、使用模型八、请求体 + 路径参数九、请求体 + 路径参数 + 查询参数十、不使用 Pydantichttps://fastapi.tiangolo.com/zh/tutorial/body/ 当你需要将数据从客户…...
【Kubernetes】常见面试题汇总(二十八)
目录 79.您如何看待公司从单一服务转向微服务并部署其服务容器? 80.什么是 Headless Service? 特别说明: 题目 1-68 属于【Kubernetes】的常规概念题。 题目 69-113 属于【Kubernetes】的生产应用题。 79.您如何看待公司从单一服务转…...
单ISP与双ISP的区别是什么
单ISP(单一互联网服务提供商)与双ISP(双重互联网服务提供商)主要在以下几个方面有区别: 服务冗余: 单ISP:只有一个互联网服务提供商提供的网络连接。如果该ISP发生故障,整个网络连接…...
【linux】gcc makefile
🔥个人主页:Quitecoder 🔥专栏:linux笔记仓 目录 01.gcc如何完成02.gcc选项03.函数库与动静态链接静态链接动态链接库文件特点和用途动态链接版本和兼容性 04.makefile自动推导 01.gcc如何完成 预处理(进行宏替换) 预处理功能主要…...
12.Java基础概念-面向对象-static
欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 Facts speak louder than words! 一、static关键字的含义…...
移动开发(三):使用.NET MAUI打包第一个安卓APK完整过程
目录 一、修改AndroidManifest.xml 配置APP基本信息权限 二、修改项目属性调整输出Android包格式为APK 三、项目发布 四、APP分发 五、总结 之前给大家介绍过使用使用.NET MAUI开发第一个安卓APP,今天给大家介绍如何打包成APK,然后安装到安卓手机正常运行。这里还是沿用…...
数据库中的DUAL表
在日常的数据库操作中,DUAL表是一个特殊的存在。它是一个伪表,用于在不需要实际数据表的情况下进行简单的查询。特别是在执行一些无关联的数据计算时,DUAL表经常派上用场。 什么是DUAL表? DUAL表最早出现在Oracle数据库中&#…...
寄宿制学校自闭症教育:为每个孩子创造奇迹
寄宿制学校自闭症教育:星贝育园——为每个孩子创造奇迹 在自闭症儿童教育的广阔领域中,寄宿制学校以其独特的教育模式和全方位的关怀体系,正逐步成为推动这些特殊孩子成长与发展的重要力量。广州的星贝育园自闭症儿童寄宿制学校,…...
Vue前端无法接收到后端返回的数据以及全局CSS样式影响(已解决)
Vue前端无法接收到后端返回的数据 前提:把很久以前的项目,翻出来重新优化一下,做一下前端的美化(以前都是用的element的UI,现在想自己写)。 由于是自己利用简单的html语句,主要面向各个按钮控…...
力扣234 回文链表 Java版本
文章目录 题目描述代码 题目描述 给你一个单链表的头节点 head ,请你判断该链表是否为 回文链表 。如果是,返回 true ;否则,返回 false 。 示例 1: 输入:head [1,2,2,1] 输出:true 示例 2&…...
银行性能测试怎么做?来认识下这4个性能测试工具!
一、银行项目性能测试是什么? 银行项目性能测试是一种软件测试形式,用于评估银行应用程序的性能和负载能力。 它的主要目标是确保银行系统能够在不同负载水平下提供稳定、高效的服务。 性能测试涵盖了多个方面,包括响应时间、吞吐量、并发用…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
