前端 - 如何在antd design pro脚手架中向打包后的index.html添加自定义DOM元素？
antd design pro 脚手架里，如何设置打包出来的index.html 里面添加其他dom元素呢？
我在 config.ts 文件中 设置了
headScripts: [ // 解决首次加载时白屏的问题 { src: '/scripts/loading.js', async: true }, { content: `<div id="fileContent" />`, charset: 'utf-8' }, ],虽然生成的 html 里面包含了 fileContent元素，但是在代码层面还是找不到这个元素呢
<link href="/manifest.json" rel="manifest"><script async="" src="/scripts/loading.js"></script><script charset="utf-8"><div id="fileContent" /></script></head><body><div id="root"></div><script src="/umi.js"></script></body></html>
共有2个答案
我使用的 umi4，只能通过 config.ts中来配置拼接html，umi4已经废弃了modifyHtml这个功能了。
我在headScripts中添加了一个js，在js中去添加了dom元素
fileShow.js
(function() { let obj = document.createElement("div"); obj.setAttribute('id', 'fileContent'); document.body.append(obj)})();config.ts中的配置
headScripts: [ { src: '/scripts/fileShow.js', async: true }, ],
在antd design pro脚手架中，向打包后的index.html添加自定义DOM元素，你应该直接在public/index.html中手动添加这些元素，而不是通过config.ts文件中的headScripts设置。headScripts主要用于在HTML的<head>部分插入脚本标签，而不是DOM元素。
因此，你应该直接在public/index.html文件中添加你想要的DOM元素，例如：
<!DOCTYPE html><html lang="en"><head> <!-- ... 其他head内容 ... --></head><body> <div id="root"></div> <div id="fileContent"></div> <!-- 在这里添加你的自定义DOM元素 --> <script src="/umi.js"></script></body></html>请注意，将DOM元素添加到<body>部分中，而不是<head>部分，因为<head>部分通常用于包含元数据、链接到样式表和脚本，而不是实际的页面内容。
对于你的例子，<div id="fileContent" />应该直接放在<body>标签内，而不是作为<script>标签的内容。<script>标签通常用于包含JavaScript代码，而不是HTML元素。
关于为什么你在代码层面找不到fileContent元素，原因可能是因为你将它添加到了<script>标签中，而实际上你应该将它作为一个独立的DOM元素添加到<body>中。由于它被错误地放置在<script>标签内，浏览器可能不会将其视为一个有效的DOM元素，因此你在JavaScript代码中无法找到它。
确保你按照上述方法直接在public/index.html中添加DOM元素，然后重新构建你的项目，你应该能在生成的index.html文件中看到并且能够通过JavaScript访问这个元素。
-
一个具有“姓名”、“地址”和“工资”属性的实体“人” 两个角色-“员工”和“经理” 虽然员工应该能够编辑他自己的地址，但他肯定不能改变他的工资或其他人的地址。虽然他可能被允许看到自己的工资和其他用户的地址，但他甚至不允许看到其他人的工资，更不用说编辑了。另一方面，manager具有完全的readwrite权限。 这在后端不是问题--我们可以在那里使用自定义bean验证来强制执行写权限。 我想收到
-
我有一个包含数据的表，我想在其中添加一个页脚，以便累加并显示每行中int值的总和。 我尝试了以下代码。 我的表格如下： 我的Vue数据 我现在得到的只是一个反映页眉的页脚。 这是在引导Vue自定义头文档之后编写的，但在细节上非常粗略，没有提供如何添加真正自定义信息的真实信息。我只想我的模板显示在页脚。 编辑：好吧，我确实弄明白了以下几点。还是不是我想要的。 我意识到Bootstrap-Vue设置的
-
我无法在gradle项目中添加自定义源代码集。如何初始化这里的版本号？我的gradle文件看起来像：
-
在RestTemplate中，我有一个自定义拦截器，它将记录一些请求-响应详细信息并保存到数据库。 我的自定义拦截器： springboot中的RestTemboard bean配置： 将拦截器添加到restTemboard bean： 如何将此拦截器添加到佯装客户端？ 正在应用中。yml： InterceptorOne为假装客户端中的每个请求添加标头： 但是我不能添加日志服务拦截器，因为它由于错
-
我是Perl 6的新手。我的Atom编辑器中有以下代码，但我仍然不明白这是如何工作的。正如docs.raku.org所说，我复制了以下代码，但似乎不起作用。所以我将代码更改为： 输出为： 我知道它是有效的，但是docs.raku.org中的文档与此有点不同，它在第7行的AT-KEY方法之前没有“自”。有没有更详细的例子？
-
我正在为Wordpress中的Elementor编辑器开发一个自定义小部件。 我想设置自定义小部件图标，Elementor提供了get_ICON函数，我们必须返回类，该类包含：before伪元素，并在浏览器中呈现。 是否有任何方法可以使用png或任何其他格式将图标更新到Elementor小部件。 甚至我也试着用内容为空和背景图像的类。它不起作用了。 在Elementor中创建自定义小部件的文档：h
-
是否有一个时间格式来指定这样的日期序列到轴在D3和v4？
-
我的工具基本上读取PDF并在JTextArea中打印PDF的内容。在我的PDF包含阿拉伯语的PH Mirjan字体之前，一切正常。我的文本区域显示一些垃圾字符，如下所示。 我该如何解决这个问题？ 我的文本区域的默认字体是Arial Unicode MS。我可以配置文本区域的字体吗？假设我在本地下载了PH Mirjan，如何将文本区域字体更改为下载的字体。非常感谢任何建议或参考链接。 编辑 这给了我