部署--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个性能测试工具!
一、银行项目性能测试是什么? 银行项目性能测试是一种软件测试形式,用于评估银行应用程序的性能和负载能力。 它的主要目标是确保银行系统能够在不同负载水平下提供稳定、高效的服务。 性能测试涵盖了多个方面,包括响应时间、吞吐量、并发用…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
Leetcode33( 搜索旋转排序数组)
题目表述 整数数组 nums 按升序排列,数组中的值 互不相同 。 在传递给函数之前,nums 在预先未知的某个下标 k(0 < k < nums.length)上进行了 旋转,使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...
DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...
Linux中《基础IO》详细介绍
目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改,实现简单cat命令 输出信息到显示器,你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...
