d00510

UP - Web Application

这是一个准备发布到UNPKG的Web应用程序。

使用方法

通过UNPKG访问

<!-- 直接访问主页 -->
https://unpkg.com/d0051bs@latest/

<!-- 或者引用特定文件 -->
https://unpkg.com/d0051bs@latest/index.html

<!-- 访问静态资源 -->
https://unpkg.com/d0051bs@latest/static/images/4-001.png
https://unpkg.com/d0051bs@latest/static/css/base.css

本地开发

• 克隆或下载项目
• 使用任何HTTP服务器打开 index.html
• 或者直接在浏览器中打开 index.html

项目结构

up/
├── index.html          # 主入口文件
├── package.json        # NPM包配置
├── static/            # 静态资源
│   ├── css/           # 样式文件
│   ├── js/            # JavaScript文件
│   ├── images/        # 图片资源
│   └── fonts/         # 字体文件
├── assets/            # 其他资源文件
└── pages/             # 页面相关资源

路径修复机制

本项目包含了完整的UNPKG路径修复机制：

• 自动检测环境：检测是否在UNPKG环境下运行
• 动态base标签：自动设置正确的base URL
• 网络请求拦截：拦截XMLHttpRequest和fetch请求，修复错误路径
• DOM元素修复：自动修复图片src和背景图片URL
• 动态监听：使用MutationObserver监听DOM变化，实时修复新添加的元素

支持的路径格式

• ✅ https://unpkg.com/d0051bs@1.0.0/static/images/1-001.png (正确格式)
• ✅ static/images/1-001.png (相对路径)
• ✅ /static/images/1-001.png (绝对路径)
• ✅ 动态生成的路径也会被自动修复

错误路径自动修复

特别针对以下错误格式进行自动修复：

• ❌ https://unpkg.com/d0051bs@1.0.0/static/1-002.png → ✅ https://unpkg.com/d0051bs@1.0.0/static/images/1-002.png (自动添加images目录)
• ❌ https://unpkg.com/static@2.0.0/images/3-001.png → ✅ https://unpkg.com/d0051bs@1.0.0/static/images/3-001.png
• ❌ https://unpkg.com/static/images/2-001.png → ✅ https://unpkg.com/d0051bs@1.0.0/static/images/2-001.png
• ❌ static/1-002.png → ✅ https://unpkg.com/d0051bs@1.0.0/static/images/1-002.png (相对路径自动添加images目录)

拦截机制包括：

• XMLHttpRequest请求拦截
• Fetch API请求拦截
• Image对象src属性拦截
• HTMLImageElement src属性拦截
• DOM元素实时监听和修复

版本历史

• v1.0.0: 初始版本，适配UNPKG发布，包含完整的路径修复机制

许可证

MIT