uni-app vue2 cli uview2 运行空白 刷新之后regeneratorRuntime报错

uni-app vue2 cli uview2 运行空白 刷新之后regeneratorRuntime报错

操作步骤:

  • cli项目创建及uview2的安装方式,然后运行

预期结果:

  • 正常运行

实际结果:

  • regeneratorRuntime报错

bug描述:

  • cli创建默认模板项目,
  • 按步骤安装sass,引入uview2.0,
  • 内置浏览器运行,页面空白,
  • 刷新之后,控制台报错
  • 而注释掉main.js中的uview部分,则正常编译运行
信息类别 详情
产品分类 uniapp/H5
PC开发环境 Mac
操作系统版本 macOS 12.4
浏览器平台 Chrome
浏览器版本 101
项目创建方式 CLI
CLI版本号 2.0.1-34720220422002

Image 1 Image 2 Image 3

uniapp-v2.zip

2 回复

在使用 uni-appuView2 进行开发时,遇到页面空白并且刷新后报 regeneratorRuntime 错误,通常是由于 async/await 语法在低版本浏览器中不被支持,或者相关的 polyfill 没有正确配置导致的。以下是一些可能的解决方案:

1. 安装 @babel/runtime@babel/plugin-transform-runtime

确保项目中已经安装了 @babel/runtime@babel/plugin-transform-runtime,并且在 .babelrcbabel.config.js 中正确配置了插件。

npm install @babel/runtime @babel/plugin-transform-runtime --save-dev

babel.config.js 中添加以下配置:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['@babel/plugin-transform-runtime', {
      regenerator: true
    }]
  ]
};

2. 使用 core-js 进行 Polyfill

确保 core-js 已经安装,并且在项目的入口文件(如 main.js)中引入 core-js 进行 polyfill。

npm install core-js --save

main.js 中添加:

import 'core-js/stable';
import 'regenerator-runtime/runtime';

3. 检查 uView2 的版本和配置

确保你使用的是最新版本的 uView2,并且按照官方文档正确配置了 uView2

4. 检查 uni-app 的版本

确保你的 uni-app 版本是最新的,并且与 uView2 兼容。

5. 检查浏览器兼容性

如果你在低版本浏览器中运行代码,可能需要确保所有现代 JavaScript 特性都被正确 polyfill。

6. 清理缓存并重新编译

有时候,问题可能是由于缓存导致的。尝试清理项目缓存并重新编译:

npm run clean
npm run build

7. 检查 async/await 使用

确保你在代码中正确使用了 async/await,并且没有在不需要的地方使用它。

8. 检查网络请求

如果页面空白是由于网络请求失败导致的,检查你的 API 请求是否正确,并且网络连接是否正常。

9. 使用 uni-app 提供的 polyfill

uni-app 也提供了一些 polyfill,你可以尝试在 main.js 中引入:

import '[@dcloudio](/user/dcloudio)/uni-polyfill';
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!