HarmonyOS 鸿蒙Next Web加载沙盒中Vue打包项目白屏问题

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web加载沙盒中Vue打包项目白屏问题

web加载应用沙盒.filesDir+"/xxxxx/"下的Vue打包文件，在onInterceptRequest做了映射,但是白屏
加载项目资源目中的Vue项目通过映射response.setResponseData($rawfile(xxx));可以成功加载
但是加载沙盒中的vue项目不可以,映射时通过setResponseData（arrybuffer）

请问怎么解决

如果是.png .jpg .ico 等图片资源、.css资源、.js资源、.mp4资源 应该怎么映射

Harmonyos Next教程
2 回复

png jpg MP4用arrayBuffer加载，js css html 用readTextSync，可参考：

https://www.example.com/dist/index.html

.onInterceptRequest((event) => { if (!event) { return; } console.log(event.request.getRequestUrl()) if (this.schemeMapSha.has(event.request.getRequestUrl())) { let shaFileName: string = this.schemeMapSha.get(event.request.getRequestUrl())!; let mimeType = this.mimeTypeMapSha.get(shaFileName); let response = new WebResourceResponse(); if (typeof mimeType === ‘string’) { let data: string|ArrayBuffer = ‘’; // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置 if(mimeType.includes(‘javascript’) || mimeType.includes(‘css’) || mimeType.includes(‘html’)){ data = fileIo.readTextSync(this.filesDir+ ‘/’+shaFileName); }

if(mimeType.includes(‘image’)||mimeType.includes(‘mp4’)){ let file = fs.openSync(${getContext().filesDir}/${shaFileName}) let stat = fs.statSync(file.fd) let buf = new ArrayBuffer(stat.size) fs.readSync(file.fd, buf) data = buf; fs.closeSync(file) }

response.setResponseData(data); response.setResponseEncoding(‘utf-8’); response.setResponseMimeType(mimeType); response.setResponseCode(200); response.setReasonMessage(‘OK’); response.setResponseIsReady(true); return response; } }

更多关于HarmonyOS 鸿蒙Next Web加载沙盒中Vue打包项目白屏问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙Next Web加载沙盒中Vue打包项目出现白屏问题，可能的原因及解决方向如下：

  1. 资源路径问题：检查Vue项目打包后的资源文件路径是否正确，确保在鸿蒙系统中能够正确访问到所有静态资源。特别是publicPath配置，它决定了应用内部的所有资源（JS、CSS、图片等）的基准路径。

  2. 兼容性问题：Vue项目可能使用了某些鸿蒙系统不支持的Web API或特性。检查项目是否使用了鸿蒙沙盒环境中不兼容的代码，并进行相应的调整或替代。

  3. 权限设置：鸿蒙系统可能对Web应用的权限有特定要求。确保应用已正确申请并获得了必要的权限，如网络访问权限、文件读写权限等。

  4. 错误日志：查看鸿蒙系统的开发者工具或控制台输出的错误信息，这可能会提供导致白屏的具体原因。根据错误信息定位问题并修复。

  5. Vue版本与配置：确认Vue及其相关依赖的版本是否与鸿蒙系统的兼容性要求相匹配。有时候，升级或降级Vue版本可以解决兼容性问题。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部