Quasar - получить ключ API из .env в загрузочные файлы

#vue.js #quasar-framework #dotenv

Вопрос:

Получить значение GOOGLE_MAP_API переменной в .env файле во gmap-vue.js внутренний boot/ каталог

это работает, если я использую ключ сразу, как это

   load: {
    key: 'AIzaSyCw9Txxxxxxxxxxxxx',
    ...
  }

но я хотел бы использовать ключ, поступающий из .env файла, подобного этому process.env.GOOGLE_MAP_API

quasar.conf.js

 module.exports = function (/* ctx */) {
  return {
    ...
    boot: [
      'gmap-vue'
    ],

boot/gmap-vue.js

 import Vue from "vue";
import * as GmapVue from "gmap-vue";

Vue.use(GmapVue, {
  load: {
    key: process.env.GOOGLE_MAP_API,
    ...
  }
}

.env

 GOOGLE_MAP_API='AIzaSyCw9Txxxxxxxxxxxxx'

он вернет ошибку:

 Google Maps JavaScript API warning: InvalidKey 
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key

подводя итог, если я получу ключ от process.env него, выдает ошибку

1. Вы пытались удалить кавычки в файле .env?

2. да, я тоже пробовал это

3. Если вы поместите где-нибудь в свой компонент console.log(process.env.GOOGLE_MAP_API), вы получите правильное значение?

4. да, это странно, даже когда я удаляю двойные кавычки в строке .env (перезапускаю терминал), когда я console.log(), он всегда добавляет двойные кавычки.

5. Возможно, у вас разные файлы .env? И вы модифицируете не тот?

Ответ №1:

Я заметил, что когда я обращаюсь к строковому значению, process.env оно всегда добавляет двойные кавычки («).

даже если нет двойных кавычек строкового значения из .env

итак, что я сделал, я использую регулярное выражение;

   load: {
    key: process.env.GOOGLE_MAP_API.replace(/"/g, ""),

РЕДАКТИРОВАТЬ: если у вас, ребята, есть лучший ответ, пожалуйста, дайте, спасибо