如何在Laravel + Vue.js项目中使用.env文件？

Question

3

我可以翻译这段内容。这是关于编程的内容，讲述了一个使用 Laravel (5.8) 和 Vue.js (2.6.10) 的项目。目前，他们在同一个仓库中。为了前端（Vue.js），他们正在使用 Laravel 的 .env 文件中的环境变量，并使用 MIX 前缀。

但是

除了 Laravel 的 .env 文件，我还需要为 Vue.js 创建单独的 .env 文件。这可行吗？如何实现？

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

- Ketan Akbari

制作您自己的 env.js 文件，将所有变量声明在该文件中，并在 app.js 文件中导入它。 - Karan Sadana

为什么不创建一个新的配置文件，并通过额外的.env值进行设置呢？我会在我的默认.env文件中创建行，例如VUE_SOME_VALUE或FRONTEND_SOME_VALUE。 - Buraco

请访问 https://cli.vuejs.org/guide/mode-and-env.html#modes 链接。 - Jinal Somaiya

@KaranSadana 我不想将变量声明为配置，需要在.env文件中声明。这样我们可以根据.env文件构建。 - Ketan Akbari

@JinalSomaiya 这在使用vue-cli创建项目时非常有用。我将laravel和vuejs项目设置结合起来，并使用了laravel mixin。 - Ketan Akbari

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ohgodwhy · Accepted Answer

Laravel已经提供了这个功能。对于任何你想要暴露给laravel/mix的变量，你只需要在前面加上MIX_。

MIX_HOST=https://example.com

现在你可以在Vue应用程序中使用process.env.MIX_HOST来访问它。

如果未以MIX_为前缀，则Mix不会包含来自您的.env文件的任何其他变量。

为了更加精细地控制，您可以在Vue应用程序中使用dotenv并指定您希望加载的.env文件的文件名：

Original Answer翻译成"最初的回答"

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

然后在你的Vue应用的主要js文件中：

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

这将会把该文件中的任何值都加入到process.env全局变量中，可能会导致变量污染。最初的回答。