将 Laravel .env 变量添加到 Vue 组件 - PHP (1)

📌 相关文章

📜 将 Laravel .env 变量添加到 Vue 组件 - PHP (1)

📅 最后修改于: 2023-12-03 14:53:43.944000 🧑 作者: Mango

将 Laravel .env 变量添加到 Vue 组件 - PHP

在Laravel应用程序中，通常使用 .env 文件来配置环境变量。这些变量在应用程序的整个生命周期中都可以使用，包括Vue组件的代码中。在本文中，我们将探讨如何将Laravel的.env变量添加到Vue组件。

步骤

1. 创建Vue文件

首先，我们需要在我们的Laravel应用程序中创建一个Vue组件。这可以通过运行以下命令来完成：

php artisan make:component MyComponent --inline

这将在resources/js/components文件夹中创建一个MyComponent.vue文件。

2. 添加.env变量

在Laravel应用程序中，默认情况下，.env文件中的变量是在应用程序中可用的。因此，我们只需要在我们的Vue组件中访问它们。

我们可以使用 dotenv 将.env变量添加到我们的Vue组件中。在resources/js 目录中，安装 dotenv：

npm install dotenv --save-dev

然后，您可以将以下代码添加到您的Vue组件中，以将.env变量添加到您的Vue组件中。

import dotenv from 'dotenv';

dotenv.config();

3. 使用.env变量

现在，我们可以在我们的Vue组件中使用.env变量了。例如，我们可以在以下代码中使用.env中的变量：

<template>
  <div>
    <h1>{{ env('APP_NAME') }}</h1>
    <p>{{ env('APP_DESCRIPTION') }}</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log(process.env.APP_NAME);
      console.log(process.env.APP_DESCRIPTION);
    }
  }
</script>

4. 编译Vue组件

最后，我们需要编译我们的Vue组件并将其包含在我们的Laravel应用程序中。可以通过运行以下命令来完成这项工作：

npm run dev

或者，如果您想在更改时自动重新编译：

npm run watch

这将编译你的Vue组件，并将编译后的文件保存在public/js目录中。现在，您可以像使用其他Vue组件一样使用它。例如，在您的blade视图文件中：

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>

结论

现在，您已经了解了如何将Laravel的.env变量添加到Vue组件中。使用dotenv包，您可以轻松地访问.env中的所有变量，并将它们用于您的Vue组件中。