如何在 laravel + vuejs 项目中使用 .env 文件？答案

【问题标题】：How to use .env files in laravel + vuejs project?如何在 laravel + vuejs 项目中使用 .env 文件？
【发布时间】：2019-12-13 14:27:06
【问题描述】：

我在单个 repo 中有 laravel(5.8) + vuejs(2.6.10) 项目。

目前，我正在使用来自 laravel 的 .env 的前端（vuejs）变量使用 env 变量，使用前缀 MIX。

但是

除了 laravel 的 .env 之外，我需要单独的 .env 文件用于 vuejs。可能吗？怎么样？

我需要根据 .env 文件进行构建（而不是使用 Vue-cli）

【问题讨论】：

制作您自己的 env.js 文件，并在该文件中标记您的所有变量并将其导入 app.js 文件中
你为什么不创建一个新的配置文件并通过额外的.env 值设置它。我会在我的默认 .env 文件中创建行，例如 VUE_SOME_VALUE 或 FRONTEND_SOME_VALUE
访问cli.vuejs.org/guide/mode-and-env.html#modes链接。
@KaranSadana 我不想将变量声明为配置，需要在 .env 中声明。所以我们可以根据.env文件进行构建。
@JinalSomaiya 在使用 vue-cli 创建项目时很有用。我结合了 larave_vuejs 项目设置并使用了 laravel mixin

【解决方案1】：

Laravel 已经提供了开箱即用的功能。对于您想要暴露给laravel/mix 的任何变量，您只需在它们前面加上MIX_

MIX_HOST=https://example.com

您现在可以在您的 Vue 应用程序中以 process.env.MIX_HOST 的身份访问它。

如果您的 .env 文件中没有前缀 MIX_ 的任何其他变量，Mix 将不会包含这些变量。

对于更可控的方法，您可以为此使用dotenv，并指定您希望在Vue 应用程序中加载的.env 文件的文件名：

yarn add -D dotnev // npm i dotenv -D

然后在您的 Vue 应用程序的主 js 文件中：

require('dotenv').config({
  path: path.resolve(process.cwd(), '.env-vue')
})

这将污染process.env 全局与此文件中的任何值。

【讨论】：