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

iswrvxsc 于 2023-05-18 发布在 Vue.js

关注(0)|答案(5)|浏览(209)

我从Inertia Laravel示例https://github.com/drehimself/inertia-example开始
它只不过是Laravel与Vue在一个单一的代码库中，使用Inertia.js：https://github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue
我试图访问Laravel的.env变量在我的.vue组件文件中
.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变量，理想情况下，不通过控制器传递所有内容，这似乎不是很有效？

vue.js

来源：https://stackoverflow.com/questions/57194840/accessing-laravels-env-variables-inside-inertia-js-vue-files

5条答案

按热度按时间

ztigrdn81#

我终于修好了。以下是如何，对于那些感兴趣的人：在AppServiceProvider中：

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

在vue文件中：

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

第二部分是我错过了什么。。我试图接受app.name prop ，并错过了$页。希望这对某人有帮助！

赞(0）回复(0）举报 2023-05-18

h5qlskok2#

我知道这有点老了，但我遇到了同样的问题，上面和周围的网络方法对我不起作用。惯性可能改变了什么？不管怎样，我确实让它工作了。
就像上面一样，在AppServiceProvider中添加以下内容：

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

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

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

赞(0）回复(0）举报 2023-05-18

xkftehaa3#

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

赞(0）回复(0）举报 2023-05-18

91zkwejq4#

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

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

赞(0）回复(0）举报 2023-05-18

aiqt4smr5#

如果你正在使用vite的惯性，你可以访问如下

const cek = import.meta.env.VITE_GEO_API_BASE_URL
console.log(cek)

赞(0）回复(0）举报 2023-05-18

我来回答

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

5条答案

相关问题

热门标签

最新问答