[英]Accessing Laravel's .env variables inside Inertia.js Vue files
I am starting with the Inertia Laravel example https://github.com/drehimself/inertia-example我从惯性 Laravel 示例开始https://github.com/drehimself/inertia-example
which is nothing but Laravel with Vue in one monolithic codebase, using Inertia.js: https://github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue这只不过是 Laravel 和 Vue 在一个整体代码库中,使用 Inertia.js: https : //github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue
I am trying to access Laravel's .env variables inside my .vue component files我试图在我的 .vue 组件文件中访问 Laravel 的 .env 变量
.env file: .env 文件:
APP_NAME=ABC
In app\\Providers\\AppServiceProvider.php:在 app\\Providers\\AppServiceProvider.php 中:
public function register()
{
Inertia::share('appName', env('APP_NAME'));
}
In resources\\js\\Home.vue component:在 resources\\js\\Home.vue 组件中:
<template>
<div>
<span class="tw-text-left">{{ appName }}</span>
</div>
</template>
<script>
export default {
props: [
"appName",
]
}
</script>
In my vue console, appName shows up blank.在我的 vue 控制台中,appName 显示为空白。 It should show "ABC" but doesn't.它应该显示“ABC”,但没有。 What's going on here, and how I can access all my env variables, ideally without passing everything through the controller, which doesn't seem very efficient?这里发生了什么,以及我如何访问我所有的 env 变量,理想情况下不通过控制器传递所有内容,这似乎不是很有效?
I finally got it working.我终于让它工作了。 Here's how, for those interested: In AppServiceProvider:以下是感兴趣的人的方法:在 AppServiceProvider 中:
Inertia::share(function () {
return [
'app' => [
'name' => config('app.name'),
],
];
});
In your vue file:在你的 vue 文件中:
<template>
<div>
App name: {{ $page.app.name }}
</div>
</template>
The 2nd part is what I was missing..I was trying to accept the app.name prop, and was missing $page.第二部分是我所缺少的..我试图接受 app.name 道具,但缺少 $page。 Hope this helps somebody!希望这对某人有帮助!
I know this is kind of old, but I ran into this same issue and the methods above and around the net did not work for me.我知道这有点旧,但我遇到了同样的问题,上面和网上的方法对我不起作用。 Something might have changed with Inertia?惯性可能会改变什么? Anyway, I did get it working though.无论如何,我确实让它工作了。
Just like above add the following to the register method within your AppServiceProvider:就像上面一样,将以下内容添加到 AppServiceProvider 中的 register 方法中:
Inertia::share('appName', config('app.name'));
// I'm using config, but your could use env
Then in your Vue component access the $inertia
variable like so:然后在您的 Vue 组件中访问$inertia
变量,如下所示:
{{ $inertia.page.props.appName }}
From the documentation on the author's website , you need to instruct vue to inject the page
into your component, and then you can accessed the shared variables.从作者网站的文档中,需要指示vue将page
注入到你的组件中,然后才能访问共享变量。
For example:例如:
<template>
<div>
<span class="tw-text-left">{{ page.props.appName }}</span>
</div>
</template>
<script>
export default {
inject: ['page'],
// ...
}
</script>
if you want to share multiple variables with view use the following:如果要与视图共享多个变量,请使用以下命令:
Inertia::share('app', [
'name' => config('app.name'),
'url' => config('app.url'),
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.