Question

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

开始

这不过是使用Inertia.js在一个整体代码库中的带有Vue的Laravel： 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变量，理想情况下无需将所有内容都传递给控制器，这似乎不是很有效？

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中的register方法中：

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

然后在Vue组件中像这样访问$inertia变量：

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

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

3 个答案: