uni-app vue3 在 main.js 中使用顶层await在APP端会报错

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app vue3 在 main.js 中使用顶层await在APP端会报错

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 Android
手机版本号 Android 12
手机厂商 华为
手机机型 魅族16
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

async function test(){  
    return new Promise((resolve)=>{  
        setTimeout(()=>{  
            resolve()  
        },2000)  
    })  
}  

await test()  
console.log('-----')  

export function createApp() {  
    const app = createSSRApp(App)  
    return {  
        app,  
    }  
}

操作步骤：

  • 在 main.js 中使用顶层await

预期结果：

  • 在 main.js 中使用顶层await不报错

实际结果：

  • 在 main.js 中使用顶层await在APP端会报错：Module format “iife” does not support top-level await. Use the “es” or “system” output formats rather.

bug描述：

vue3 在 main.js 中使用顶层await在APP端会报错 ：Module format “iife” does not support top-level await. Use the “es” or “system” output formats rather.，H5端正常


Harmonyos Next教程
3 回复

在 JavaScript 中， await 关键字只能在 async 函数内部使用，您这样使用可能会在运行时正常，但是在打包发行时就会也会产生问题。


H5中是正常的，就是APP端有问题，而且vite本身也支持在顶层使用await吧

在 uni-app 中使用 Vue 3 时，直接在 main.js 中使用顶层 await 可能会导致错误，尤其是在 APP 端。这是因为顶层 await 语法在 JavaScript 的某些运行环境中并不被原生支持，包括一些旧版或特定环境下的 JavaScript 引擎。uni-app 基于 Vue.js 开发多端应用，包括小程序、H5、App等，而这些平台对 JavaScript 的支持程度有所不同。

为了在 uni-app 中安全地使用异步操作，尤其是当你需要在应用启动时执行异步任务（如从服务器获取配置），你可以采用异步函数并在适当的地方调用它，而不是直接使用顶层 await。下面是一个如何在 main.js 中处理异步初始化的示例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// 定义一个异步初始化函数
async function asyncInit() {
  try {
    // 模拟一个异步操作，比如获取远程配置
    const response = await fetch('https://api.example.com/config');
    const config = await response.json();

    // 你可以将配置存储到 Vuex、全局变量或其他地方
    store.commit('setConfig', config);

    // 创建并挂载应用
    const app = createApp(App);
    app.use(store);
    app.use(router);
    app.mount('#app');
  } catch (error) {
    console.error('异步初始化失败:', error);
    // 处理错误，可能需要显示错误页面或回退到默认配置
    const app = createApp(App);
    app.use(store);
    app.use(router);
    app.mount('#app');
  }
}

// 调用异步初始化函数
asyncInit();

在这个例子中，我们定义了一个名为 asyncInit 的异步函数来处理所有需要在应用启动时完成的异步操作。这个函数首先尝试获取远程配置，然后将配置存储到 Vuex 中。无论异步操作成功还是失败，最终都会创建并挂载 Vue 应用。

这种方法避免了在顶层使用 await，同时保证了应用启动逻辑的清晰和错误处理的一致性。此外，它还允许你在异步操作失败时采取适当的措施，比如显示错误页面或回退到默认配置。

总之，虽然顶层 await 在某些环境下很方便，但在 uni-app 中，特别是考虑到多端兼容性，使用异步函数并在适当的地方调用它们通常是一个更安全、更灵活的选择。

回到顶部