如何在 Laravel Vue JS 应用程序中使用环境变量？

在这个简单的示例中，让我们看看如何在 Vue js 中使用 Laravel 的环境变量。我想与您分享laravel vue js获取.env变量值。您将学习将 Laravel .env 变量添加到 Vue 组件。我简单解释了在 Vue 中使用 laravel .env 变量。

在这里，我将在 .env 文件中添加“VITE_APP_NAME”变量和“Vite Title”值。然后我将在 vue js 文件中使用“VITE_APP_NAME”变量。我将使用“import.meta”访问环境变量。让我们按照下面的例子。

让我们看看下面的示例如何在 Vue JS 中访问 Laravel .env 变量。

第 1 步：在 .env 文件中设置变量

我们将在 .env 文件中添加 VITE_APP_NAME 变量及其值。所以让我们将其添加到 .env 文件中。

VITE_APP_NAME="Vite Title"

第2步：在Vue JS中获取.env变量

const appName = import.meta.env.VITE_APP_NAME;

例子：

/resources/js/app.js

import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = import.meta.env.VITE_APP_NAME;

createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});

InertiaProgress.init({ color: '#4B5563' });