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 |
可尝试该帖子的解决方案 https://ask.dcloud.net.cn/question/146194
在使用 uni-app
和 uView2
进行开发时,遇到页面空白并且刷新后报 regeneratorRuntime
错误,通常是由于 async/await
语法在低版本浏览器中不被支持,或者相关的 polyfill
没有正确配置导致的。以下是一些可能的解决方案:
1. 安装 @babel/runtime
和 @babel/plugin-transform-runtime
确保项目中已经安装了 @babel/runtime
和 @babel/plugin-transform-runtime
,并且在 .babelrc
或 babel.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';