HarmonyOS 鸿蒙Next Vue工程导出的dist, webview无法加载

因为这样就类似于双击直接打开该html，是通过file协议打开的，会存在跨域问题。同时vue使用了type=“module”，也受限于同源策略。

  目前官方已提供本地资源跨域解决方案，可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/web-cross-origin-V13

  您也可以通过live server之类的工具，通过服务器打开，再用web引用对应服务的地址（也就是在线的html地址），您可以确认下这样是否符合您的要求。

，您可以参考下列demo代码来解决页面无法加载的问题：

import web_webview from '@ohos.web.webview';

@Entry
@Component
export struct WebView {
@State controller: web_webview.WebviewController = new web_webview.WebviewController();;
responseweb: WebResourceResponse = new WebResourceResponse();
schemeMap = new Map([
["https://www.example.com/dist/index.html", "dist/index.html"],
["https://www.example.com/dist/assets/index-CZGWx5-I.js", "dist/assets/index-CZGWx5-I.js"],
["https://www.example.com/dist/assets/login-BhcpwUw3.js", "dist/assets/login-BhcpwUw3.js"],
["https://www.example.com/dist/assets/rx-login-type-BbQytlu4.js", "dist/assets/rx-login-type-BbQytlu4.js"],
["https://www.example.com/dist/assets/login-CKn4brKa.js", "dist/assets/login-CKn4brKa.js"],
["https://www.example.com/dist/assets/rx-login-account-select-viUrzmc2.js", "dist/assets/rx-login-account-select-viUrzmc2.js"],
["https://www.example.com/dist/assets/index-Da5s7hEy.js", "dist/assets/index-Da5s7hEy.js"],
["https://www.example.com/dist/assets/cartoon-avatar-CDZuNsoH.js", "dist/assets/cartoon-avatar-CDZuNsoH.js"],
["https://www.example.com/dist/assets/index-C-KrbmHO.js", "dist/assets/index-C-KrbmHO.js"],
["https://www.example.com/dist/assets/md5-DLPczxzP.js", "dist/assets/md5-DLPczxzP.js"],
["https://www.example.com/dist/assets/tabbar-DdRvMf-g.js", "dist/assets/tabbar-DdRvMf-g.js"],
["https://www.example.com/dist/assets/institution-code-I6sgfkdo.js", "dist/assets/institution-code-I6sgfkdo.js"],
["https://www.example.com/dist/assets/index-05ZrbQ_m.css", "dist/assets/index-05ZrbQ_m.css"],
["https://www.example.com/dist/assets/login-7aCMnJPN.css", "dist/assets/login-7aCMnJPN.css"],
["https://www.example.com/dist/assets/index-CnAqlfC8.css", "dist/assets/index-CnAqlfC8.css"],
["https://www.example.com/dist/assets/rx-login-account-select-BI6hT-7m.css", "dist/assets/rx-login-account-select-BI6hT-7m.css"],
["https://www.example.com/dist/assets/index-BS17_dpn.css", "dist/assets/index-BS17_dpn.css"],
["https://www.example.com/dist/assets/rx-login-type-D_GGCjJx.css", "dist/assets/rx-login-type-D_GGCjJx.css"],
["https://www.example.com/dist/assets/login-DI6xCZrE.css", "dist/assets/login-DI6xCZrE.css"],
["https://www.example.com/dist/assets/institution-code-ByRWUBCE.css", "dist/assets/institution-code-ByRWUBCE.css"],
["https://www.example.com/dist/assets/login-bg-DC5C8WRI.png", "dist/assets/login-bg-DC5C8WRI.png"],
["https://www.example.com/dist/assets/ruixue-logo-aPMI8d4X.jpg", "dist/assets/ruixue-logo-aPMI8d4X.jpg"],
["https://www.example.com/dist/assets/login-bg2-BL3lHRCX.png", "dist/assets/login-bg2-BL3lHRCX.png"],
])

// 构造本地文件和构造返回的格式mimeType
mimeTypeMap = new Map([
["dist/index.html", 'text/html'],
["dist/assets/index-CZGWx5-I.js", "text/javascript"],
["dist/assets/login-BhcpwUw3.js", "text/javascript"],
["dist/assets/rx-login-type-BbQytlu4.js", "text/javascript"],
["dist/assets/login-CKn4brKa.js", "text/javascript"],
["dist/assets/rx-login-account-select-viUrzmc2.js", "text/javascript"],
["dist/assets/index-Da5s7hEy.js", "text/javascript"],
["dist/assets/cartoon-avatar-CDZuNsoH.js", "text/javascript"],
["dist/assets/index-C-KrbmHO.js", "text/javascript"],
["dist/assets/md5-DLPczxzP.js", "text/javascript"],
["dist/assets/tabbar-DdRvMf-g.js", "text/javascript"],
["dist/assets/institution-code-I6sgfkdo.js", "text/javascript"],
["dist/assets/index-05ZrbQ_m.css", "text/css"],
["dist/assets/login-7aCMnJPN.css", "text/css"],
["dist/assets/index-CnAqlfC8.css", "text/css"],
["dist/assets/rx-login-account-select-BI6hT-7m.css", "text/css"],
["dist/assets/index-BS17_dpn.css", "text/css"],
["dist/assets/rx-login-type-D_GGCjJx.css", "text/css"],
["dist/assets/login-DI6xCZrE.css", "text/css"],
["dist/assets/institution-code-ByRWUBCE.css", "text/css"],
["dist/assets/login-bg-DC5C8WRI.png", "image/png"],
["dist/assets/ruixue-logo-aPMI8d4X.jpg", "image/jpeg"],
["dist/assets/login-bg2-BL3lHRCX.png", "image/png"],
])
build() {
Scroll(){
Column(){
Text('hello world');
Web({ controller: this.controller, src: 'https://www.example.com/dist/index.html' }).domStorageAccess(true).javaScriptAccess(true)
.onInterceptRequest((event) => {
console.log(event?.request.getRequestUrl())
if (!event) {
return;
}
console.log(String(this.schemeMap.has(event.request.getRequestUrl())))
// 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域
if (this.schemeMap.has(event.request.getRequestUrl())) {
let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
let mimeType = this.mimeTypeMap.get(rawfileName);
console.log(mimeType)
if (typeof mimeType === 'string') {
let response = new WebResourceResponse();
// 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置
response.setResponseData($rawfile(rawfileName));
response.setResponseEncoding('utf-8');
response.setResponseMimeType(mimeType);
response.setResponseCode(200);
response.setReasonMessage('OK');
response.setResponseIsReady(true);
return response;
}
}
return null;
})
.domStorageAccess(true)
.javaScriptAccess(true)
.imageAccess(true)
.height(500)
}

}

}
}