как получить доступ к API-ключу vue.js в приложении laravel

Question

Здравствуйте, я пытаюсь получить доступ к моему API-ключу YouTube, расположенному в файле .env из этого кода:

<template>
   <div class="YoutubeDash__wrapper">
      <video-group :videos="videos"></video-group>
   </div>
</template>

<script>
  import VideoGroup from './VideoGroup.vue';
  import Search from './Search';

  export default {
    components: {
      VideoGroup
    },
    created(){
      Search({
        apiKey: process.env.VUE_APP_SECRET,
        term: 'laravel repo'
      }, response => this.videos = response);
    },

    data(){
      return {
        videos: null
      }
    }
  }
</script>

Согласно документации с использованием переменных env с vue.js . Кажется, все правильно. В моем файле .env я говорю: VUE_APP_SECRET=xxxxxxxxxxxxxxx, что мне здесь не хватает?

Я получаю это сообщение об ошибке:

app.js:37809 Error: YouTube search would require a key

Любые советы приветствуются! Большое спасибо!

Answer 1

Я нашел это сообщение stackoverflow: TRUE env values ​​ и, похоже, пока нет наилучшего способа для этого, я решил это с помощью импорта из файла config.js.

Answer 2

Я предпочитаю исключить laravel-mix из этого процесса.
Обычно, в моей точке входа лезвия я использую метатеги:

<meta name="myVal" content="{{ config('<any-config-key>') }}">

<any-config-key> может быть любым ключом конфигурации laravel, в том числе взятымс .env.
Затем в моем JavaScript я делаю что-то вроде:

const setVueGlobal = (metaHeaderName, vueGlobalName) => {
    let value = document.head.querySelector('meta[name="' + metaHeaderName + '"]').content;
    if (!value) {
        console.error('some error msg');
        return null;
    }

    Vue.prototype[vueGlobalName] = value;
    return value;
};

setVueGlobal('myVal', '$myVal');

Наконец, доступ с использованием this.$myVal

Answer 3

Нам нужно поработать с небольшим количеством информации, поэтому я собираюсь сделать несколько предположений (основанных на тегах), в основном, что вы используете laravel и laravel-mix для компиляции ваших ресурсов.

Для того, чтобы laravel (-mix) сделал ваши переменные .env доступными для JS, вам необходимо добавить к ним префикс MIX_, т.е. MIX_VUE_APP_SECRET. Это сделает вашу переменную доступной как process.env.MIX_VUE_APP_SECRET.