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

Posted 2023-02-22

【中文标题】在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量

【英文标题】：Accessing Laravel's .env variables inside Inertia.js Vue files

【发布时间】：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 已修复。

【参考方案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'),
    ]);