HarmonyOS 鸿蒙的webview组件怎么加载vue或react打包后的资源

将vue或react打包后的资源放到rawfile目录用webview组件加载后是白屏。

vueper 1楼•15 天前

vue的组件不能直接应用在鸿蒙环境中。

yuanlaile 2楼•15 天前

我的意思是用vue写的前端界面打包后，放到harmony项目中，使用webview组件加载界面

itying888 3楼•15 天前

请问博主解决了吗？想知道如何能加载呢

yibo5220 4楼•15 天前

加载本地的有跨域问题,看看这个能不能解决：如何解决Web组件加载的HTML页面内检测网络状态失败-Web开发（ArkWeb）-Web框架-应用框架开发-开发 | 华为开发者联盟 (huawei.com)

sinazl 5楼•15 天前

楼主，请教一下，鸿蒙webview加载本地vue解决了吗

wuwangju 6楼•15 天前作者

同问怎么加载，文档又没写，案例demo也没有

sinazl 7楼•15 天前

因为vue打包后的dist中的index.html不支持本地访问，index.html在浏览器中运行是file开头，但是并不能加载出本来的vue的页面，正是因为这个原因导致在webview中也加载不出来，网上有解决方案说是修改index.html中script内js和css的引用路径，但是基本然并卵，好像是由办法可以让index.html在本地直接预览的，我觉得只要能实现本地预览就可以在webview中加载出来了，webview访问的思路应该也是直接类似于本地预览file这样的

h691938207 8楼•15 天前

同样也是白屏，直接打包vite默认的项目文件使用 https 的方式可以访问，但是放在本地加载也是白屏

phonegap100 9楼•15 天前

如果代码里引入vue-router, https方式访问也是白屏

ionicwang 10楼•15 天前

我也遇到这个问题了,请问这种方式可行吗?我加载的也是白屏

vueper 11楼•15 天前

HarmonyOS的webview组件加载Vue或React打包后的资源，需确保资源可本地或网络访问。首先，配置webview组件的src属性为资源地址，可使用$rawfile加载本地资源，或URL加载网络资源。若遇到跨域问题，可构造本地文件与域名的映射，通过拦截请求并替换资源路径解决。此外，检查打包后的资源文件路径是否正确，包括JS、CSS等引用路径。如果问题依旧没法解决请加我微信，我的微信是itying888。