UniApp 打包H5页面本地空白的解决办法

打包 UniApp 的 H5 项目后，直接双击 dist/build/h5/index.html 往往会显示空白。

原因

• 路径问题：构建出的 JS/CSS 默认是绝对路径（以 / 开头），用 file:// 打开时无法加载。
• 默认假设有服务器：UniApp H5 构建默认认为你会部署到 Web 服务器根目录。

解决办法

1. 本地启服务（推荐）

进入 dist/build/h5，用任意静态服务器启动：

# Node.js
npm install -g serve
serve dist/build/h5

# Python
cd dist/build/h5
python -m http.server 8080

访问 http://localhost:3000 或 http://localhost:8080。

2. 修改 manifest.json（想直接双击打开）

"h5": {
  "router": { "mode": "hash" },
  "publicPath": "./"
}

3. 部署到服务器

将 dist/build/h5 放到 Nginx/Apache/Vercel/Netlify 等静态托管环境。

Nginx 示例：

location / {
    try_files $uri $uri/ /index.html;
}

总结

• 空白是因为资源路径不对。
• 推荐方式：开本地服务器。
• 双击打开：改成相对路径。
• 上线：部署到服务器并配置好路由。