uni-app 使用 vue-cli 命令行创建的 H5 项目无法使用 async/await

uni-app 使用 vue-cli 命令行创建的 H5 项目无法使用 async/await

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本号 19044.1706
浏览器平台 Chrome
浏览器版本 100.0.4896.127（正式版本） （64 位）
项目创建方式 CLI
CLI版本号 4.5.17

示例代码：

export default {  
  onLaunch: function() {  
    console.log('App Launch')  
    this.asyncMethod()  
  },  
  onShow: function() {  
    console.log('App Show')  
  },  
  onHide: function() {  
    console.log('App Hide')  
  },  
  methods: {  
    async asyncMethod() {  
      await this.resolveAfter2Seconds('hello')  
      console.log('resolved')  
    },  
    resolveAfter2Seconds(x) {  
      return new Promise(resolve => {  
        setTimeout(() => {  
          resolve(x)  
        }, 2000)  
      })  
    }  
  }  
}

操作步骤：

使用 async/await 语句块即可复现

预期结果：

能够正常使用 async/await 语法

实际结果：

项目正常编译通过，但于浏览器运行时出错，无法使用 await async

bug描述：

[system] TypeError: Cannot set properties of undefined (setting 'default')  
    at _regeneratorRuntime (chunk-vendors.js:12075:19)  
    at Vue.asyncMethod (App.vue:14:1)  
    at Vue.onLaunch (App.vue:5:1)  
    at invokeWithErrorHandling (chunk-vendors.js:4214:26)  
    at Vue.push.4UNb.Vue.__call_hook (chunk-vendors.js:10957:17)  
    at o (chunk-vendors.js:35000:164)  
    at Vue.mounted (chunk-vendors.js:35465:29)  
    at invokeWithErrorHandling (chunk-vendors.js:4214:57)  
    at callHook (chunk-vendors.js:6620:7)  
    at mountComponent (chunk-vendors.js:6484:5)

更多关于uni-app 使用 vue-cli 命令行创建的 H5 项目无法使用 async/await的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

请问解决了吗？

更多关于uni-app 使用 vue-cli 命令行创建的 H5 项目无法使用 async/await的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也有同样的问题，楼主解决了吗。。

4.5.17 是什么版本？
新创建一个试试。

请问解决了吗？我也遇到这个问题了

锁定 @babel/runtime 的版本到 7.17.9 可以解决

锁定 @babel/runtime 的版本到 7.17.9没有解决啊，请问大佬具体怎么搞的

可参考该 帖子 的解决方案

在使用 uni-app 通过 vue-cli 命令行创建的 H5 项目中，如果无法使用 async/await，可能是因为项目配置中没有正确处理 async/await 的语法转换。以下是一些可能的解决方案：

1. 确保安装了 @babel/plugin-transform-runtime

async/await 是 ES2017 的语法，需要 Babel 进行转换。确保项目中安装了 @babel/plugin-transform-runtime 插件。

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

然后在 babel.config.js 中添加该插件：

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

2. 检查 browserslist 配置

确保你的 browserslist 配置支持现代浏览器，这样 Babel 就不会对 async/await 进行不必要的转换。

在 package.json 中检查 browserslist 配置：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

3. 确保 core-js 已安装

async/await 依赖于 core-js，确保项目中安装了 core-js：

npm install --save core-js

然后在 main.js 或入口文件中引入 core-js：

import 'core-js/stable';

4. 检查 vue-cli 配置

如果你使用的是 vue-cli，确保你的 vue.config.js 中配置了正确的 Babel 选项：

module.exports = {
  transpileDependencies: true
};

5. 确保 uni-app 版本支持

确保你使用的 uni-app 版本支持 async/await。如果你使用的是较旧的版本，考虑升级到最新版本。

npm install uni-app@latest

6. 检查代码中的语法错误

确保你的代码中没有其他语法错误，这些错误可能会导致 async/await 无法正常工作。

7. 清除缓存并重新构建

有时候，缓存可能会导致构建问题。尝试清除缓存并重新构建项目：

npm run clean
npm install
npm run build
回到顶部