HarmonyOS 鸿蒙Next webview无法加载vue打包后的本地html、js、css的问题

HarmonyOS 鸿蒙Next webview无法加载vue打包后的本地html、js、css的问题大佬们,我是新手来学习的.遇到个奇怪的问题,在webview中加载使用vue打包的文件是无法显示的,直接白屏啥都没有,但是我手写一个简单的test.js,里面的方法是可以被调用的,包括css样式文件也无法正常加载,有大佬知道怎么回事吗?

我的系统开发环境是: win10+DevEco Studio 3.1.1 Release+API9

我的测试工具有: IDE的模拟器+手机mate60 pro,手机的系统os版本是4.2.0.128

这是我的Index.ets的内容,当我使用本地启动的vue项目的链接"http://192.168.3.5/#/index"和本地搭建nginx服务去访问打包后的dist文件夹的文件都是可以正常打开并使用的，只要是用网络连接的方式是可以访问打开的。但是当我将vue项目打包后的dist文件夹里的文件复制到rawfile后却无法加载执行。

这是我在电脑浏览器以及webview使用"http://192.168.3.5/#/index"链接在手机和模拟器上调试的结果的vue demo页面，一个非常非常基础的vue demo项目

这是使用Web({ src: $rawfile("index.html"), controller: this.webViewController }).height("100%").width("100%")运行的结果，与手机上的效果是一样的

这是我的项目文件

这是我的index.html的内容

这是test.js的内容

很奇怪，手写的test.js里的方法修改div的文字内容却可以成功，打包后的js和css文件却不能执行

更多关于HarmonyOS 鸿蒙Next webview无法加载vue打包后的本地html、js、css的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 1楼•3 天前作者

尝试一下onInterceptRequest接口，对资源进行拦截，然后重新设置一下responseMimeType试试，比如资源是.css，可以设置new WebResourceResponse().setResponseMimeType(“text/css”)，其他参数也需要配置一下，responseData可以用fs获取文件句柄进行设置。

更多关于HarmonyOS 鸿蒙Next webview无法加载vue打包后的本地html、js、css的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼•3 天前

具体可以参考web组件的自定义页面请求，之前我也遇到了复杂页面web组件无法加载https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/web-resource-interception-request-mgmt-0000001493874990-V2，

vueper 3楼•3 天前

一样的问题，我举得这是因为vue打包后的文件没有做本地预览配置，我去看了下这个网上有解决方案的，也就是打包后dist中的index.htm在浏览器中直接打开是预览不了的（file://开头），所以很可能是这个原因导致在webview中加载显示白屏问题，网上的方案有说改script引用的js和css的路径，但是尝试过了并不行，基本上采用官方的框架都有这个问题，公司自己封装过后的不算，很多公司自己封装过后的打开是可以本地预览的

解决思路：先尝试直接打开dist中的index.html，如果能正常在本地预览的话我估计就可以在webview中加载出来了，但是很遗憾我没还做出来，正在尝试

yuanlaile 4楼•3 天前

我尝试出来的结果是es6的原因,vite兼容一下旧浏览器就可以正常运行了，

itying888 5楼•3 天前

咋样解决了么，

相关代码

vueper 6楼•3 天前

生成的H5的源码能发下么

sinazl 7楼•3 天前

我是使用npm create vite@latest命令创建的基础项目，

eggper 8楼•3 天前

可能是符号#的问题，解决方法参考：鸿蒙网络编程系列20-解决web组件加载网页白屏示例

eggper 9楼•3 天前

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

caililin 10楼•3 天前

情况不一样, 这篇文章写的是使用 loadData 方法时传进去的 HTML 内容含有 # 号会被转义导致显示的问题，我的问题是使用 Web(options: { src: ResourceStr, controller: WebviewController | WebController }) 方法时，Vue 打包出来的 JS 无法正常加载，不知道问题出在了哪里。

phonegap100 11楼•3 天前

在HarmonyOS鸿蒙Next中，WebView无法加载Vue打包后的本地HTML、JS、CSS文件，可能是由于以下原因：

文件路径问题：鸿蒙Next的WebView在加载本地文件时，路径需要正确配置。确保文件路径与鸿蒙项目的资源目录结构一致，且路径大小写敏感。
文件权限问题：鸿蒙Next对文件访问权限有严格限制，确保相关文件在resources目录下，并且权限设置正确。
文件格式问题：鸿蒙Next的WebView对文件格式有特定要求，确保HTML、JS、CSS文件格式正确，且无编码问题。
WebView配置问题：检查WebView的配置，确保已启用JavaScript支持，并且未设置不兼容的选项。
鸿蒙Next版本问题：不同版本的鸿蒙Next对WebView的支持可能存在差异，确保使用的版本支持相关功能。
Vue打包配置问题：Vue打包时，确保输出文件格式和路径与鸿蒙Next的要求一致，避免出现路径或格式不兼容的情况。
调试工具使用：使用鸿蒙Next提供的调试工具，检查WebView加载过程中的错误信息，定位具体问题。
网络请求问题：如果涉及网络请求，确保网络权限已正确配置，并且请求地址和协议符合鸿蒙Next的要求。

通过以上步骤，可以排查并解决鸿蒙Next WebView无法加载Vue打包后本地文件的问题。

itying888 12楼•3 天前

在HarmonyOS鸿蒙Next中，WebView无法加载Vue打包后的本地HTML、JS、CSS文件，可能是由于文件路径或权限配置问题。请确保以下几点：

文件路径：检查文件路径是否正确，确保文件放置在resources/rawfile目录下，并使用this.$rawfile('filename')获取路径。
权限配置：在config.json中，确保已添加ohos.permission.INTERNET权限，并配置network能力。
WebView设置：在WebView组件中，使用loadUrl方法加载本地文件，如webview.loadUrl("file:///android_asset/filename.html")。
文件格式：确保HTML、JS、CSS文件格式正确，无语法错误。

通过以上步骤，应能解决WebView无法加载本地文件的问题。