在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量答案

【问题标题】：Accessing Laravel's .env variables inside Inertia.js Vue files在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量
【发布时间】：2019-12-03 07:28:12
【问题描述】：

我从 Inertia Laravel 示例开始 https://github.com/drehimself/inertia-example

这不过是 Laravel 和 Vue 在一个单一的代码库中，使用 Inertia.js： https://github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue

我正在尝试在我的 .vue 组件文件中访问 Laravel 的 .env 变量

.env 文件：

APP_NAME=ABC

在 app\Providers\AppServiceProvider.php 中：

public function register()
{
    Inertia::share('appName', env('APP_NAME'));
}

在 resources\js\Home.vue 组件中：

<template>
  <div>
        <span class="tw-text-left">{{ appName }}</span>
  </div>
</template>

<script>
export default {
  props: [
    "appName",
 ]
}
</script>

在我的 vue 控制台中，appName 显示为空白。它应该显示“ABC”，但没有。这里发生了什么，以及如何访问我的所有 env 变量，理想情况下不通过控制器传递所有内容，这似乎不是很有效？

【问题讨论】：

想指出，不知道你是否已经纠正。 env('APP_NAME ') 似乎有一个额外的空间。我相信它应该像 env('APP_NAME')。
是的 @N0000B 已修复。

标签： laravel vue.js laravel-5 vuejs2 inertiajs

【解决方案1】：

我终于让它工作了。以下是方法，对于那些感兴趣的人：在 AppServiceProvider 中：

        Inertia::share(function () {
            return [
                'app' => [
                    'name' => config('app.name'),
                ],
            ];
        });

在你的 vue 文件中：

<template>
<div>
App name: {{ $page.app.name }}
</div>
</template>

第二部分是我所缺少的......我试图接受 app.name 道具，但缺少 $page。希望这对某人有帮助！

【讨论】：

【解决方案2】：

我知道这有点老了，但我遇到了同样的问题，上面和网上的方法对我不起作用。惯性可能发生了一些变化？无论如何，我确实让它工作了。

就像上面一样，将以下内容添加到您的 AppServiceProvider 中的 register 方法中：

Inertia::share('appName', config('app.name'));
// I'm using config, but your could use env

然后在您的 Vue 组件中访问 $inertia 变量，如下所示：

{{ $inertia.page.props.appName }}

【讨论】：

【解决方案3】：

从documentation on the author's website，你需要指示vue将page注入到你的组件中，然后你就可以访问共享变量了。

例如：

<template>
  <div>
        <span class="tw-text-left">{{ page.props.appName }}</span>
  </div>
</template>

<script>
export default {
  inject: ['page'],
  // ...
}
</script>

【讨论】：

我试过了，结果控制台报错：[Vue warn]: Injection "page" not found 我认为你指出的那篇博文已经有 2 个月了，不确定是否“注入”仍然受支持:(

【解决方案4】：

如果您想与视图共享多个变量，请使用以下命令：

Inertia::share('app', [
        'name' => config('app.name'),
        'url' => config('app.url'),
    ]);

【讨论】：