前端 实现 opensearch功能 （umi项目中如何实现）
一 什么是 opensearch ？
第一步： 用百度举例：先输入百度的域名
第二步： 按Tab键
第三步： 输入值就能进行搜索了
二 一般项目使用opensearch 很简单
1.第一步，新建一个xml文件
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>百度搜索</ShortName>
<Url type="text/html" template="https://www.baidu.com/s?wd={searchTerms}"/>
</OpenSearchDescription>
ShortName : 名称
Url：type = “text/html” - 以html的格式返回；template 写入搜索逻辑， searchTerms 为搜索的内容
2.第二步，在html文件head标签中创建一个 link标签将 前面的xml文件引入即可
<link rel="search" type="application/opensearchdescription+xml" href="./opensearch.xml" title="云析搜索" />
3.第三步：项目上线之后，即可正常使用功能
三 umi 创建的react项目 如何开启 opensearch功能
难点一：umi没有暴露html文档，按照官方文档解决方案，在src/pages目录下创建一个 名为document.ejs 的文件，自己书写模板html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>云析-云样本分析平台</title>
<link rel="search" type="application/opensearchdescription+xml" href="./opensearch.xml" title="云析" />
</head>
<body>
<div id="root"></div> //注意一定要写入一个根节点，id为root的div
</body>
</html>
难点二： 发现 umi 并不能把document.djs 中的xml文件打包到dist目录下。 umi又隐藏了配置的，鬼知道 它怎么处理 djs文件的。
方法： 直接用nodejs 暴力将 xml 文件拷贝到 打包后的 dist目录下 ，利用 postbuild钩子函数
第一步：根节点上创建 runToCopy.js 文件 目的是用户文件拷贝，粘贴
const fs = require('fs');
let copy = (src, dst) => {
fs.writeFileSync(dst, fs.readFileSync(src));
};
function main(argv) {
copy(argv[0], argv[1]);
}
main(process.argv.slice(2));
第二步： 配置package.json 脚本，让build之后 执行 改copy函数
// package.json 配置 脚本 script
"postbuild": "node runToCopy.js ./public/opensearch.xml ./dist/opensearch.xml"
然后打包上线，文件完美解决。
ps ：这不是最好的办法，最好的方法还是研究umi的webpack 如何将 xml文件直接打包到dist目录中。如有好的办法请相互交流。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具