uni-app vue3打包h5文件协议访问白屏问题

示例代码：

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

操作步骤：

hbuilderx创建uniapp空白项目（选择vue3） -> 修改manifest.json为下面的配置 -> 打包-> 网站或者手机h5 ->把index.html以文件的方式放到浏览器访问 -> 白屏

预期结果：

vue3版本的文件协议的可以正常在浏览器浏览

实际结果：

白屏，有报错

bug描述：

问题描述： uniapp空白项目，选vue3，manifest.json配置base为./ ，然后打包-> 网站或者手机h5 , 打包完成后，把index.html放到浏览器浏览，白屏。

复现步骤：hbuilderx创建uniapp空白项目（选择vue3） -> 修改manifest.json为下面的配置 -> 打包-> 网站或者手机h5 ->把index.html以文件的方式放到浏览器访问 -> 白屏

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

wuwangju 1楼•4 天前

打包的H5,不支持直接协议访问的，可以利用vite 加插件的方式进行配置 https://juejin.cn/post/7237782663936327737

eggper 2楼•4 天前

我不管，官方问题，官方应该修复

phonegap100 3楼•4 天前作者

vite不支持使用file协议访问，具体原因参考 vite文档，解决方案可以在本地启动一个服务(http-server)。如果仍要通过file协议访问，可以参考楼上的回复。

wuwangju 4楼•4 天前

我这边也遇到这个问题，我这边是android混合开发的，我直接在android webview那里设置 settings.setAllowUniversalAccessFromFileURLs(true); settings.setAllowFileAccessFromFileURLs(true); settings.setAllowFileAccess(true);，我看官方是不打算解决的了，还不如直接修改android webview。

vueper 5楼•4 天前

在使用 uni-app 开发应用时，如果将项目打包为 H5 并通过文件协议（file://）访问时，可能会出现白屏问题。这通常是由于以下几个原因导致的：

1. 路由模式问题

原因: uni-app 默认使用的是 hash 路由模式，但在文件协议下，history 模式的路由可能会导致路径解析错误，从而出现白屏。

解决方案: 确保在 manifest.json 中配置了 h5 的路由模式为 hash。

{
  "h5": {
    "router": {
      "mode": "hash"
    }
  }
}

2. 资源路径问题

原因: 打包后的资源路径可能是相对路径或绝对路径，但在文件协议下，相对路径可能会导致资源加载失败，从而出现白屏。
解决方案: 在 manifest.json 中配置 h5 的 publicPath 为 ./，以确保资源路径正确。
```
{
  "h5": {
    "publicPath": "./"
  }
}
```

3. 跨域问题

原因: 如果你在项目中使用了跨域请求，文件协议下可能会出现跨域问题，导致请求失败，从而出现白屏。
解决方案: 尽量避免在文件协议下使用跨域请求，或者使用本地代理服务器来解决跨域问题。

4. 路径大小写问题

原因: 在某些操作系统（如 Linux）中，文件路径是区分大小写的，如果代码中引用的路径与实际路径大小写不一致，可能会导致资源加载失败。
解决方案: 确保所有路径的大小写一致。

5. 缓存问题

原因: 浏览器缓存可能导致旧版本的文件被加载，从而导致白屏。
解决方案: 清除浏览器缓存，或者在打包时使用不同的文件名来避免缓存问题。

6. 检查控制台错误

原因: 白屏问题通常是由于 JavaScript 或 CSS 文件加载失败导致的。
解决方案: 打开浏览器的开发者工具，查看控制台是否有错误信息，并根据错误信息进行排查。

7. 使用本地服务器

原因: 文件协议下访问 H5 页面可能会遇到各种问题，建议使用本地服务器来访问打包后的 H5 文件。
解决方案: 可以使用 http-server 或 live-server 等工具来启动一个本地服务器，然后通过 http://localhost 访问页面。

示例：使用 `http-server` 启动本地服务器

安装 http-server：
```
npm install -g http-server
```
进入打包后的 dist 目录，启动服务器：
```
http-server
```