5

我从惯性 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”，但没有。这里发生了什么，以及如何访问我的所有环境变量，理想情况下不通过控制器传递所有内容，这似乎不是很有效？

4

4 回答 4

3

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

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

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

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

{{ $inertia.page.props.appName }}
于 2020-12-05T02:49:43.960 回答
3

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

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

在你的 vue 文件中：

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

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

于 2019-07-25T17:47:36.300 回答
1

从作者网站上的文档中，您需要指示 vue 将 注入page到您的组件中，然后您可以访问共享变量。

例如：

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

<script>
export default {
  inject: ['page'],
  // ...
}
</script>
于 2019-07-25T05:41:59.140 回答
0

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

Inertia::share('app', [
        'name' => config('app.name'),
        'url' => config('app.url'),
    ]);
于 2021-10-25T06:31:27.900 回答