Vue CLI在 CommonJS 模块中不支持顶级 await 语法的解决办法

这是因为默认情况下,Vue CLI 会将你的代码转换为 CommonJS 模块,而在 CommonJS 模块中不支持顶级 await 语法。

· 在vue3项目的utils里面的js文件中写export全局调用方法时,打包依赖报错;

解决办法:
新增依赖vue/cli-plugin-top-level-await
vite依赖新增
@vue/cli-plugin-top-level-await 是一个 Vue CLI 插件,在 Vue 3 项目中使用它可以让你的应用程序支持顶级 await 语法。
在 Vue 3 中,你可以在单文件组件的顶层使用 await 关键字。这意味着你可以在组件的 setup() 函数中使用 await 关键字等待异步操作完成,然后再返回响应的值。

但是,如果你在项目中直接使用顶级 await 语法,你会得到一个语法错误

这时,你可以使用 @vue/cli-plugin-top-level-await 插件来解决这个问题。它会在你的项目中安装并配置 esm 模块,以便你可以在项目中使用顶级 await 语法。

步骤:
vite.config.js中引用

import topLevelAwait from ‘vite-plugin-top-level-await’

在plugins中加入:
topLevelAwait

topLevelAwait 是一个函数,用于在使用 @vue/cli-plugin-top-level-await 插件时配置顶级 await 的相关选项

具体来说,topLevelAwait 函数接受一个对象作为参数,其中包含两个选项:

promiseExportName: 指定导出顶级 await 语句的 Promise 对象的名称,默认为 _tla。
promiseImportName: 指定导入顶级 await 语句的 Promise 对象的名称的函数。该函数接受一个整数作为参数,表示当前顶级 await 语句的序号,从 1 开始。默认情况下,它会将导入的 Promise 对象的名称设置为 __tla_1、__tla_2、__tla_3 等。
这些选项的作用是为了确保在使用顶级 await 语法时,导入和导出的 Promise 对象的名称都是唯一的,避免在应用程序中出现命名冲突的问题

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值