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

news2024/12/25 2:57:39

这是因为默认情况下,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 对象的名称都是唯一的,避免在应用程序中出现命名冲突的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/636584.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

iToolab UnlockGo for Mac,iOS设备解锁工具

iToolab UnlockGo是一款专业的 iPhone/iPad 解锁工具,可以帮助用户解除 iOS 设备的各种锁定,包括屏幕密码、指纹密码、Face ID 等。以下是 iToolab UnlockGo 的一些主要特点: 针对多种锁定类型:iToolab UnlockGo 可以解除多种 iO…

对数组的“reg [7:0] a_tmp[32:0]”理解

数组 在verilog中,对数组reg [7:0] a_tmp[32:0]进行操作时,分不清楚先对[32:0]进行操作还是先对 [7:0]进行操作,为此进行下面的实验。进一步加深对数组的理解。 实验1: reg [7:0] a_tmp[32:0];遍历的方式: integer …

架构师日记-从技术角度揭露电商大促备战的奥秘 | 京东云技术团队

一 背景 今年的618大促已经如期而至,接下来我会从技术的角度,跟大家聊聊大促备战的底层逻辑和实战方案,希望能够解答大家心中的一些疑惑。 首先,618大促为什么如此重要呢?先从数据的角度简单做一下分析,以…

Arcgis根据经纬度获得点的地理信息/行政区划信息

步骤可以总结为: 导入shp文件(面数据,也就是行政区划的依据) 导入栅格数据 将栅格数据落入到坐标系中 将导入的栅格点导出为shp图层 栅格点与面数据连接对齐 导出结果 1、导入shp文件(面数据,也就是行…

去中心化的信任,Web3如何塑造更加牢固的客户忠诚度

在当今数字化的时代,客户忠诚度对于企业的成功至关重要。而随着Web3技术的崛起,我们正面临着一场信任的革命。本文将探讨Web3如何塑造更加牢固的客户忠诚度,并为企业带来长期的商业价值。 1.去中心化的信任机制 在传统的Web2模式下&#xff…

支付宝小程序开发

支付宝小程序商城是一种基于支付宝平台开发的小程序应用,它可以帮助商家在小程序中完成商品展示、下单购买、在线支付等操作。下面我们来介绍支付宝小程序商城的好处。 一、便捷快速 支付宝小程序商城可以直接在支付宝App中使用,无需下载和安装&#x…

InstructGPT:Training language models to follow instructions with human feedback

Training language models to follow instructions with human feedback 通过人类反馈的微调,在广泛的任务中使语言模型与用户的意图保持一致 aligning language models with user intent on a wide range of tasks by fine-tuning with human feedback 实验动机 …

【学习日记2023.6.12】之nacos配置管理_Feign远程调用_Gateway服务网关

文章目录 6. Nacos配置管理6.1 统一配置管理6.1.1 在nacos中添加配置文件6.1.2 从微服务拉取配置6.2 配置热更新 6.3 配置共享6.4 Nacos集群搭建6.4.1 集群结构图6.4.2 搭建集群初始化数据库下载nacos配置Nacos启动nginx反向代理优化 7. Feign远程调用7.1 Feign替代RestTemplat…

华为OD机试真题B卷 Java 实现【最少数量线段覆盖】,附详细解题思路

一、题目描述 给定坐标轴上的一组线段,线段的起点和终点均为整数并且长度不小于1,请你从中找到最少数量的线段,这些线段可以覆盖住所有线段。 二、输入描述 第一行输入为所有线段的数量,不超过10000,后面每行表示一条线段,格式为"x,y",x和y分别表示起点和终…

CentOS 查看某个目录:已用、可用空间情况

命令:df -h 目录 例如:df -h /home

【SpringMVC】| 报文信息转换器HttpMessageConverter

目录 框架搭建 报文信息转换器HttpMessageConverter 1. RequestBody注解 2. RequestEntity类型 3. RequestBody注解(常用) 重点:SpringMVC处理json 重点:SpringMVC处理ajax 重点:RestController注解 4. Respo…

knife4j接口文档

knife4j可以通过访问本地页面&#xff0c;实现对项目接口的管理&#xff1a;这样我们就不需要用postman软件调用接口了。 Mevan导包&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</ar…

项目经理必学的五个时间管理方法,帮你高效规划工作

作为一名项目经理&#xff0c;时间管理是你必须掌握的关键技能。常年加班&#xff0c;迎面而来的凌晨夜空&#xff0c;这些只能成为过去式。下面&#xff0c;我们将为你介绍五个行之有效的时间管理方法&#xff0c;帮助你高效规划工作&#xff0c;达成更多目标。 1、树立明确…

OpenAI官方提示词课(四)如何进行文字的情感分析

这节介绍大模型判断文字的语义&#xff0c;或者说对内容进行情感分析的能力。同时也演示了大模型如何提取出文字中的关键信息。 在传统的机器学习方案中&#xff0c;要做到对文字内容的情感分析&#xff0c;需要先对一系列的文字内容&#xff08;如评论&#xff09;进行人工标…

如何拍照识别植物?拍照识别植物的方法教学

植物是我们生活中不可或缺的一部分&#xff0c;它们不仅为我们提供氧气和美丽的景观&#xff0c;还是人类食品和药物来源之一。而随着科技水平的提高&#xff0c;越来越多的研究者开始探索如何利用图像识别技术对植物进行自动化识别和分类&#xff0c;以帮助我们更好地了解植物…

英雄算法联盟 | 七月集训报名通道开启

文章目录 前言一、英雄算法集训二、编程零基础预训练三、九日集训四、咨询答疑五、常见问题六、报名方式 前言 通知&#xff1a;英雄算法联盟六月集训 已经开始12天&#xff0c;七月算法集训将于 07月01日 正式开始&#xff0c;目前已经提前开始报名&#xff0c;报名方式见文末…

【大数据】一篇文章带你入门HBase

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 文章目录 HBase特性Hadoop的限制基本概念NameSpaceTableRowKeyColumnTimeStampCell 存储结构HBase 数据访问形式架构体系HBase组件HBase读写流程读流程写流程 MemStore Flush参数说明 StoreFile Compaction参…

剑指 Offer 09: 用两个栈实现队列

简单明了&#xff0c;带你直接看懂题目和例子。 输入&#xff1a; ["CQueue","appendTail","deleteHead","deleteHead"] 这里是要执行的方法&#xff0c;从左到右执行 [[],[3],[],[]]对应上面的方法&#xff0c;是上面方法的参数。CQ…

Android Fragment跳转Activity使用startActivityForResult获取返回值

前言 Fragment跳转Activity使用startActivityForResult获取返回值 如果直接获取是获取不到结果的 需要在fragment所属的activity中遍历 Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resul…

智驾差异化周期下的「芯」风向

随着中国市场进入智能驾驶「差异化」竞争周期&#xff0c;车企对于核心算力芯片的可选项&#xff0c;正在变得越来越多。一方面&#xff0c;车企在寻求更高性价比的替代&#xff08;升级&#xff09;方案&#xff1b;另一方面&#xff0c;多元化的需求&#xff08;舱泊一体、行…