如何在laravel应用程序中访问vue.js api密钥

您好，我正在尝试从以下代码访问位于.env文件中的youtube api密钥：

<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>

---

欢迎任何提示！非常感谢

这里我们需要处理少量信息，因此我将做一些假设（基于标签），主要是您使用laravel和laravel mix来编译资源

---

为了使你的

.env

变量可以被JS访问，你需要在变量前面加上

mix

前缀，即

mix\u VUE\u APP\u SECRET

。这将使您的变量可以作为

process.env.MIX\u VUE\u APP\u SECRET

访问。我发现了这个stackoverflow帖子：似乎还没有最佳实践方法，我通过从config.js文件导入解决了这个问题。

我更喜欢从这个过程中排除laravel MIX。
通常，在我的刀片入口点中，我使用元标记：

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

---

最后，使用

this.$myVal
yes@milo526访问。我使用laravel mix抱歉。。。我设法使用vue.config.js文件导入变量，但现在我将尝试您的建议。。。。我更喜欢将所有内容都保存在.env文件中…不，仍然不工作mmmh我的代码是这样的：搜索（{apiKey:process.env.MIX_VUE_APP_SECRET，term:'laravel repo'}，response=>this.videos=response）；您需要将
MIX_VUE_APP_SECRET=XXXXXXXXX
放在
.env
文件中，还要确保通过运行
php artisan config:cache
来重新加载配置缓存，并且仍然在开发模式下运行VUE时出现错误消息！？尝试使用package.good idea@aviram，但我正在尝试访问laravel.env文件以获取vue上下文中的api密钥，我认为在我的示例中，在head标记中访问它是没有用的，但无论如何，谢谢。
<meta name="myVal" content="{{ config('<any-config-key>') }}">

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');