如何使用Vite修复浏览器中的 "意外的令牌出口'"问题

107 阅读1分钟

我们开始使用Vite来捆绑我们的前端JavaScript。Vite是一个现代的、快速的工具,用于构建和提供前端资产。在与Vue.js或React等框架合作时,它是一个可靠的选择。

然而,我们与 "未预期的令牌export"错误作斗争。它告诉我们,在将捆绑的JavaScript导入浏览器时,export 这个关键词不可用。

本教程向你展示我们是如何解决这个问题的!

修复浏览器中的 "意外的令牌'出口'"问题

Vite使用ECMAScript模块创建了一个现代捆绑程序。所有现代浏览器都支持ECMAScript模块。在捆绑的JavaScript中使用模块,需要告诉浏览器引用的脚本是 "模块 "类型:

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>

    <!-- ✅ set this script’s type to `module` -->
    <script type="module" src="/assets/app.js"></script>
  </body>
</html>

<script> 标签上使用type="module" ,解决了 "Unexpected tokenexport" 错误。浏览器运行导入的JavaScript没有问题。棒极了!