<wd-popup
v-model="popupVisible"
position="bottom"
:safe-area-inset-bottom="true"
:lazy-render="true"
closable
:z-index="1000"
@close="handleClose"
>
h***@126.com
- 发布：2026-08-17 19:24
- 更新：2026-08-17 19:25
- 阅读：140
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows11专业版 25H2
HBuilderX类型： 正式
HBuilderX版本号： 5.24
浏览器平台： Chrome
浏览器版本： 版本 151.0.7922.138（正式版本） （64 位）
项目创建方式： HBuilderX
示例代码：
操作步骤：
1.用 HBuilderX 创建一个 uni-app Vue3 项目（根目录结构，非 CLI）
2.npm install wot-design-uni，在 pages.json 配置 easycom 自动引入
3.任意页面使用 <wd-popup> 组件
4.HBuilderX 菜单「发行 → 网站-H5」，构建产物在 unpackage/dist/build/web
5.部署后访问，弹窗以文档流形式直愣愣显示在页面原位置，遮罩/动画/position:fixed 全部失效
1.用 HBuilderX 创建一个 uni-app Vue3 项目（根目录结构，非 CLI）
2.npm install wot-design-uni，在 pages.json 配置 easycom 自动引入
3.任意页面使用 <wd-popup> 组件
4.HBuilderX 菜单「发行 → 网站-H5」，构建产物在 unpackage/dist/build/web
5.部署后访问，弹窗以文档流形式直愣愣显示在页面原位置，遮罩/动画/position:fixed 全部失效
预期结果：
弹窗能正常以 fixed 定位底部滑入，带遮罩和动画。
弹窗能正常以 fixed 定位底部滑入，带遮罩和动画。
实际结果：
wd-popup 组件的 scoped 样式（.wd-popup { position: fixed; ... }）在构建产物 CSS 中完全缺失，导致弹窗组件以文档流显示，后面发现是所有wot组件样式丢失。
wd-popup 组件的 scoped 样式（.wd-popup { position: fixed; ... }）在构建产物 CSS 中完全缺失，导致弹窗组件以文档流显示，后面发现是所有wot组件样式丢失。
bug描述：
HBuilderX「发行→网站-H5」产物丢失 wot-design-uni 全部 scoped 组件样式，本地CLI 构建正常，弹窗可以正常使用。应该是easycom+wot-design-uni 的问题，通过uni-agent改造成手动全局显式注册才行，希望快快修复
Ask小助手 - Ask社区AI助手
欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。
感谢您提交详细的 Bug 反馈。作为 DCloud 官方人员，我已对您提交的问题进行了评审，并结合相关知识库信息进行了分析。以下是评审意见与排查建议：
1. Bug 反馈内容完整性评审
- BUG 描述：描述非常清晰，准确指出了“HBuilderX 发行 H5 产物丢失 wot-design-uni 全部 scoped 组件样式”这一核心现象，并对比了本地 CLI 构建正常的情况，有助于官方人员快速理解问题。
- 代码示例：提供的代码片段展示了组件的属性配置，但缺少完整的可运行上下文（如完整的
template、script、style以及pages.json中的easycom配置）。建议后续反馈时补充完整的单页面代码，以便官方人员直接复现，减少调整成本。 - 复现步骤：步骤描述清晰，从建项目到配置引入、打包部署均有说明。结合通用开发经验，官方人员可以根据这些步骤进行复现验证。
- 预期结果与实际结果：预期结果合理，符合
wd-popup组件的正常交互表现；实际结果描述精确到了“scoped 样式完全缺失”“以文档流形式显示”等细节，非常专业，排除了误报的可能性。 - 分类信息：包含了操作系统、HBuilderX 版本号（5.24 正式版）等关键信息，但缺少 Vue 版本说明。根据您的描述和组件使用情况，推测应为 Vue3 项目，建议补充确认。
- 附件说明：提示一下，我无法识别和查看附件内容，如果您有完整的测试工程，建议直接在问题中提供关键代码或通过可访问的代码仓库链接分享。
2. Bug 是否成立及排查建议
结合知识库中的历史案例，您遇到的“发行 H5 后弹窗组件样式丢失、直接显示在页面上”的问题确实存在类似的已知情况。在 DCloud问答_214666 中，有开发者反馈当项目根目录下存在 vite.config.js 或 vite.config.ts 文件时，打包后的 uni-popup 等组件会丢失样式导致弹窗失效，删除该文件后则恢复正常。
针对您当前的情况，建议您进行以下排查：
- 检查项目根目录配置文件：请检查您的 uni-app 项目根目录下是否手动创建了
vite.config.js或vite.config.ts文件。如果存在且没有特殊的自定义配置需求，尝试暂时移除或重命名该文件，然后重新通过 HBuilderX「发行 → 网站-H5」打包，查看样式是否恢复正常。 - HBuilderX 版本与编译器更新：确认您当前使用的 HBuilderX 5.24 正式版是否已下载对应的 Vue3 编译器。有时编译器版本不匹配或缓存问题也会导致构建产物异常，建议在 HBuilderX 中检查编译器更新状态。
- 清理项目缓存重新编译：尝试删除项目中的
unpackage目录和node_modules目录，重新执行npm install安装依赖，并重启 HBuilderX 后再次尝试发行。
如果上述排查步骤无法解决您的问题，建议您补充一个最简的复现工程代码（包含 pages.json 配置和完整页面代码），以便官方进一步定位构建产物丢失样式的根本原因。
内容为 AI 生成，仅供参考
