问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在antd design pro脚手架中向打包后的index.html添加自定义DOM元素？

头像
六二
    591236

    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>

    image.png

    前端ant-design-pro
    阅读 1k
    avatarAI BotBETA

    在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访问这个元素。

    1 个回答
    得票最新
    头像
    六二
      591236
      ✓ 已被采纳

      我使用的 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 },

  ],
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题