node.js - Laravel Vue 环境变量在哪里？

Question

我正在将 Vue.js 2.0 与 Laravel 结合使用。 Laravel 有一个 .env 文件，允许您执行以下操作:

$foo = env('bar', 'somekey');

但是如果我想要在 Vue.js 组件中使用变量 bar，则必须执行以下操作:

Blade 中:

var bar = '{{ env('bar') }}';

在 VUE 中:

data {
    ...
    foo: bar
}

这似乎不是实现所需结果的最优雅的方式。

我发现当我运行 npm run production 脚本时，有一部分执行以下操作:

cross-env NODE_ENV=development ...

所以我有两个问题:

1. development 引用的 env 文件在哪里，以便我可以向其中添加变量？

2. 如何访问 Vue 组件中的这些变量？

Answer 1

不确定这是否正是您正在寻找的内容，但这里有一篇关于“在 Laravel/Vue 应用程序中共享数据”的文章。 https://zaengle.com/blog/layers-of-a-laravel-vue-application

阅读“数据传输策略”部分。

//Blade Template
<script>
    window.Laravel = <?php echo json_encode([
         'csrf_token => csrf_token(),
         'user'      => $user
    ]); ?>
</script>

<my-custom-vue-component></my-custom-vue-component>


//Vue Component
data(){
    return {
        user: window.Laravel.user
    }
}