Quasar+Vue3项目使用vue3-google-map遇exports未定义错误求助

我基于Quasar平台开发Vue3应用，添加了一个用vue3-google-map展示谷歌地图的页面，已经按照官方文档“你的第一张地图”步骤操作，地图看似能正常工作，但控制台立刻抛出错误：Uncaught ReferenceError: exports is not defined at vue3-google-map:16:36，而且这个错误发生在Vite加载项目之前。以下是我的index.html文件，请问引入vue3-google-map的脚本位置是否正确？如果不正确应该放在哪里？还有哪些解决该错误的建议？

<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">

    <script src="https://unpkg.com/vue3-google-map"></script>
  </head>
  <body>
    <!-- quasar:entry-point -->
  </body>
</html>

1. 脚本位置问题 #

当前把<script src="https://unpkg.com/vue3-google-map"></script>放在<head>里是不正确的。这个依赖基于ES模块，直接在Vite加载前引入会导致浏览器无法识别CommonJS风格的exports导出语法，从而触发错误。

正确的位置是将脚本移到<body>标签末尾，也就是<!-- quasar:entry-point -->注释之后，确保Quasar/Vite的入口脚本先加载完成：

<body>
  <!-- quasar:entry-point -->
  <script src="https://unpkg.com/vue3-google-map"></script>
</body>

不过更推荐通过包管理器安装依赖，而非直接引入CDN脚本，这样能更好地兼容Vite的模块系统。

2. 推荐的依赖引入方式 #

放弃CDN引入，改用包管理器安装vue3-google-map：

• 执行安装命令：

npm install vue3-google-map
# 或
yarn add vue3-google-map
# 或
pnpm add vue3-google-map

• 在需要使用地图的组件中按需导入：

<script setup>
import { GoogleMap, Marker } from 'vue3-google-map'
</script>

3. 其他错误解决建议 #

• 若坚持用CDN，需指定ES模块版本的链接（unpkg默认可能导出CommonJS格式，浏览器不支持），同时添加type="module"属性，并放在body末尾：

<script type="module" src="https://unpkg.com/vue3-google-map/dist/vue3-google-map.esm.js"></script>

• 检查quasar.config.js配置文件，确认Vite的模块相关配置未禁用ES模块支持，确保build或devServer配置中无影响模块解析的设置。
• 清除浏览器缓存和Vite缓存（执行npm run clean或手动删除node_modules/.vite目录），重新启动项目，避免缓存残留导致的旧代码问题。

内容的提问来源于stack exchange，提问作者Loren