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

Question

我从 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" 但没有。这里发生了什么，以及我如何访问我的所有环境变量，理想情况下不通过控制器传递所有内容，这看起来效率不高？

Answer 1

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

Answer 2

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

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

在你的 vue 文件中：

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

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

Answer 3

我知道这有点老了，但我运行遇到了同样的问题，网上和网上的方法对我不起作用。惯性可能改变了什么？不管怎样，我确实让它工作了。

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

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

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

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

Answer 4

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

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

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

Accessing Laravel's .env variables inside Inertia.js Vue files

inertiajs

laravel

vue.js

laravel-5

vuejs2