vite2 打包报 Top-level await is not available in the configured target environment ...

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在用vite2 + vue3 + elementplus开发时，vite2 打包报了一个错： Top-level await is not available in the configured target environment (“chrome87”, “edge88”, “es2019”, “firefox78”, “safari13.1”)

---

一、错误原因

「ECMAScript」提案 Top-level await 由 Myles Borins 提出，它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。Top-level await 是个新特性，打包不支持此特性。

二、解决方案

1.引入vite-plugin-top-level-await

npm install vite-plugin-top-level-await -D

2.在vite.config.js配置此插件

代码如下（示例）：

import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: [
    topLevelAwait({
      // The export name of top-level await promise for each chunk module
      promiseExportName: '__tla',
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${i}`
    })
  ]
});

重新打包即可

---