当在使用 Vite 进行项目构建时，可能会遇到如下错误提示：ERROR: Top-level await is not available in the configured target environment。
问题原因
这个错误通常是由于项目配置中的目标浏览器环境不支持 JavaScript 的 top-level-await 特性。top-level-await 允许在模块的顶层直接使用 await 关键字，这在某些现代浏览器中是支持的。但是在一些老旧的浏览器中，这个特性是不支持的，所以在使用 Vite 进行项目构建时，会出现这个错误。
解决方案
- 设置
build.target为 esnext：将 Vite 配置文件中的build.target设置为esnext。这样做会让 Vite 构建目标为支持最新 JavaScript 特性的环境。这是一个快速解决问题的方法，但可能不适用于需要兼容旧版浏览器的项目。
// vite.config.js
build: {
target: 'esnext'
}
- 指定具体的浏览器版本：如果你需要更精确的控制，可以将
build.target设置为一个特定的浏览器版本数组。这允许你根据项目需求和用户群体定制支持的浏览器环境。
// vite.config.js
build: {
target: ["chrome89", "edge89", "firefox89", "safari15"]
}
- 使用
vite-plugin-top-level-await插件：另一个选择是使用vite-plugin-top-level-await插件。这个插件可以帮助你在不支持top-level-await的环境中使用该特性。它通过转换代码来兼容旧浏览器。
首先安装该插件：
pnpm install vite-plugin-top-level-await --save-dev
然后在 Vite 配置文件中引入和使用该插件。
import topLevelAwait from 'vite-plugin-top-level-await';
export default {
plugins: [topLevelAwait()]
}
参考文档：
- 您可以在 MDN Web Docs 上查看不同浏览器对
top-level-await特性的支持情况。 vite-plugin-top-level-await插件的详细使用说明和示例可以在其 GitHub 仓库 中找到。
欢迎访问：天问博客
