HarmonyOS鸿蒙Next中Vue工程导出的dist如何使用webview加载应用

HarmonyOS鸿蒙Next中Vue工程导出的dist如何使用webview加载应用 Vue工程导出的dist文件夹引入到rawfile文件夹中, Web({ src: $rawfile(‘widget/html/dist/index.html’), controller: this.controller}), 页面无法正常加载

eggper 1楼

因为这样就类似于双击直接打开该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) => {
            if (!event) {
              return;
            }
            if (this.schemeMap.has(event.request.getRequestUrl())) {
              let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
              let mimeType = this.mimeTypeMap.get(rawfileName);
              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)
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Vue工程导出的dist如何使用webview加载应用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼作者

在HarmonyOS鸿蒙Next中，使用WebView加载Vue工程导出的dist文件，可以通过以下步骤实现：

准备Vue工程：确保Vue工程已经构建完成，生成dist文件夹，包含index.html和其他静态资源文件。
创建鸿蒙工程：在DevEco Studio中创建一个新的鸿蒙工程，选择适当的模板。

添加WebView组件：在layout文件中添加WebView组件。例如，在ability_main.xml中添加以下代码：

<WebView
    ohos:id="$+id:webview"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:layout_alignment="center"/>

加载Vue应用：在MainAbilitySlice中，通过WebView加载index.html文件。将dist文件夹放置在resources/rawfile目录下，然后使用以下代码加载：
```
WebView webView = (WebView) findComponentById(ResourceTable.Id_webview);
webView.load("file:///resources/rawfile/dist/index.html");
```
运行应用：编译并运行鸿蒙应用，WebView将加载并显示Vue应用。

以上步骤确保了Vue工程在鸿蒙Next中通过WebView正确加载和显示。

sinazl 3楼

在HarmonyOS鸿蒙Next中，可以通过WebView组件加载Vue工程导出的dist文件。首先，将dist文件夹中的静态资源（如index.html、js、css等）放置到应用的assets目录下。然后，在鸿蒙应用的AbilitySlice中使用WebView组件，通过loadUrl()方法加载本地的index.html文件。示例代码如下：

WebView webView = new WebView(this);
webView.loadUrl("file:///android_asset/index.html");
setUIContent(webView);

确保WebView配置了正确的权限，并在config.json中添加internet权限以支持网络请求。