Vue Google Maps加载.env中API密钥时出现NotLoadingAPIFromGoogleMapsError错误求助

可能的原因及修复步骤： #

1. 检查.env文件的命名与位置 #

• 确保.env文件放在项目根目录（与package.json同级），而非src或其他子目录
• 开发环境使用.env或.env.development，生产环境用.env.production，文件名不能写错

2. 验证.env变量格式 #

• 变量名必须以VUE_APP_开头，值不需要加引号（除非包含特殊字符），正确格式示例：

  VUE_APP_GOOOGLEMAPS_KEY=你的实际API密钥
  

  错误示例：VUE_APP_GOOOGLEMAPS_KEY="你的密钥"（引号会被当作密钥的一部分传递）

3. 重启开发服务器 #

• Vue CLI仅在启动时加载.env文件，修改.env后必须重启npm run serve，否则新变量不会生效

4. 确认变量是否正确注入 #

• 在setup函数中打印变量，验证是否获取到正确值：

  setup() {
    const center = { lat: 40.689247, lng: -74.044502 };
    const API_KEY = process.env.VUE_APP_GOOOGLEMAPS_KEY;
    console.log('API_KEY:', API_KEY); // 查看控制台输出是否为实际密钥
  
    return { center, API_KEY };
  },
  

  若输出undefined，说明.env配置有误；若输出带引号或多余字符，检查.env文件的写法

5. 确认组件的API密钥绑定方式 #

• 确保<GoogleMap>组件的:api-key是动态绑定（带冒号），不要写成静态属性：
  正确：<GoogleMap :api-key="API_KEY" ...>
  错误：<GoogleMap api-key="API_KEY" ...>（会把字符串"API_KEY"当作密钥传递）

6. TypeScript类型声明（可选） #

• 若使用TypeScript，可在src/env.d.ts中声明环境变量，避免类型报错：

  declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      process: {
        env: {
          VUE_APP_GOOOGLEMAPS_KEY: string;
        };
      };
    }
  }
  export {};
  

额外排查点 #

• 确认.env文件未被.gitignore意外忽略（若在忽略列表中，确保本地存在正确的.env文件）
• 检查Google Cloud控制台，确认API密钥已启用Maps JavaScript API，且HTTP referrer限制与你的开发域名匹配

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