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

本地开发

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

项目结构

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

路径修复机制

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

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

支持的路径格式

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

错误路径自动修复

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

• ❌ https://unpkg.com/[email protected]/static/1-002.png → ✅ https://unpkg.com/[email protected]/static/images/1-002.png (自动添加images目录)
• ❌ https://unpkg.com/[email protected]/images/3-001.png → ✅ https://unpkg.com/[email protected]/static/images/3-001.png
• ❌ https://unpkg.com/static/images/2-001.png → ✅ https://unpkg.com/[email protected]/static/images/2-001.png
• ❌ static/1-002.png → ✅ https://unpkg.com/[email protected]/static/images/1-002.png (相对路径自动添加images目录)

拦截机制包括：

1. XMLHttpRequest请求拦截
2. Fetch API请求拦截
3. Image对象src属性拦截
4. HTMLImageElement src属性拦截
5. DOM元素实时监听和修复

版本历史

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

许可证

MIT