Question

您好，我正在尝试通过以下代码访问位于.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>

根据文档using env variables with vue.js。一切似乎都是正确的。在我的.env文件中，我说：VUE_APP_SECRET=xxxxxxxxxxxxxxx,我在这里想念什么？

我收到此错误消息：

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

欢迎任何提示！非常感谢！

Answer 1

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

要使laravel（-mix）可以使JS访问.env变量，您需要在变量前加上MIX_，即MIX_VUE_APP_SECRET。这将使您的变量可以通过process.env.MIX_VUE_APP_SECRET访问。

Answer 2

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

Answer 3

我更喜欢从这个过程中排除laravel-mix。
通常，在我的刀片服务器入口点中，我使用meta标签：

<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

进行访问

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

3 个答案: