Доступ к переменным Laravel.env в файлах Inertia.js Vue

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

Я пытаюсь получить доступ к переменным Laravel.env внутри моих файлов компонентов.vue

Файл.env:

APP_NAME=ABC

В app\Providers\AppServiceProvider.php:

public function register()
{
    Inertia::share('appName', env('APP_NAME'));
}

В ресурсе \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

Я знаю, что это немного устарело, но я столкнулся с той же проблемой, и методы, описанные выше и в сети, не работали для меня. Что-то могло измениться с Inertia? В любом случае, я все же заставил это работать.

Как и выше, добавьте в метод register в вашем AppServiceProvider следующее:

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

Затем в вашем компоненте Vue перейдите к $inertia переменная так:

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

Answer 2

Я наконец получил это работает. Вот как, для тех, кто заинтересован: В AppServiceProvider:

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

В вашем VUE файле:

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

2-я часть - это то, чего мне не хватало.. Я пытался принять реквизит app.name и пропустил $page. Надеюсь, это кому-нибудь поможет!

Answer 3

Из документации на веб-сайте автора, вы должны указать Vue, чтобы ввести page в ваш компонент, а затем вы можете получить доступ к общим переменным.

Например:

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

<script>
export default {
  inject: ['page'],
  // ...
}
</script>

Answer 4

если вы хотите поделиться несколькими переменными с представлением, используйте следующее:

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

Answer 5

если вы используете инерцию с Vite, вы можете получить доступ, как показано ниже

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

вы можете узнать больше о vite env https://dev.to/arielmejiadev/load-laravel-env-variables-into-client-code-with-vite-9ld