nvue页面webview加载网页时在uni-app Android 11以下加载type="module"的js时报错

nvue页面webview加载网页时在uni-app Android 11以下加载type="module"的js时报错

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 23H2(0S内郚版本22631.4169)
HBuilderX类型 正式
HBuilderX版本 4.66
手机系统 Android
手机系统版本 Android 9.0
手机厂商 模拟器
手机机型 雷电模拟器
页面类型 nvue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

https://gitcode.com/outsider123/demo2 demo代码仓库

操作步骤：

在Android 11 中运行项目，等待网页加载完成会发现没有执行main.js里的代码，控制台报

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

切换为vue页面，控制台不会报错，背景正常更改为红色

预期结果：

不会报错

实际结果：

报Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.错误

bug描述：

Android11中，在nvue页面使用webview嵌入本地页面时，如本地页面加载了type="module"的js文件时报

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

更多关于nvue页面webview加载网页时在uni-app Android 11以下加载type="module"的js时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于nvue页面webview加载网页时在uni-app Android 11以下加载type="module"的js时报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在Android 11以下版本中，nvue页面webview加载本地模块化JS时的兼容性问题。问题核心在于Android 11以下版本的webview对ES模块的MIME类型检查更严格。

解决方案：

  1. 对于本地文件加载，可以尝试在script标签中移除type="module"属性，改用传统方式引入JS
  2. 如果必须使用模块化，可以尝试修改webview配置：
// 在manifest.json中配置
"app-plus": {
  "webview": {
    "mixedContent": "compatibility"
  }
}
  1. 或者通过base64方式内联JS代码：
<script>
  // 将JS代码转为base64内联
  eval(atob('base64编码的JS代码'))
</script>
回到顶部