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

Question

我想使用 Vue JS 访问 .env 变量。

在我的 .env 文件中，我已将 'MIX_' 前缀添加到 var.

MIX_VAR=key

然后在 vue 组件中，我在 created():

console.log(process.env.MIX_VAR);

结果我一直未定义。

我已经尝试清除配置缓存，但仍然遇到同样的问题。有什么想法吗？

Answer 1

您必须为要替换的环境变量构建您的 JS。您可以使用 npm 或 yarn

Answer 2

环境变量

您可以通过在您的 .env 文件中为一个键添加前缀 MIX_ 来将环境变量注入到 Mix 中：

MIX_SENTRY_DSN_PUBLIC=http://example.com

在.env 文件中定义变量后，您可以通过process.env 对象访问。如果值在您运行监视任务期间更改，您将需要重新启动任务：

process.env.MIX_SENTRY_DSN_PUBLIC

最重要的是要记住，您必须使用 Laravel Mix 才能正常工作。 Mix 是注入环境变量的东西。

Answer 3

在windows中：

这对我有用 webpack.mix

...只需在 env 文件中添加一个带有此前缀的新变量：MIX_

MIX_API_URL=http://laravel:8000

但需要重新启动 php artisan serve 并重新启动 npm 运行 watch....

  let api_url = process.env.MIX_API_URL;
  console.log("my env variable:");
  console.log(api_url);

在linux或docker中：

我还没用过

Answer 4

 process.env.MIX_VAR /  process.env.MIX_STRIPE_KEY

无需任何设置即可使用。只是运行这个命令

npm run prod

Answer 5

这对我有用

但是，如果在任务运行ning 期间环境变量的值发生变化，您将需要重新启动任务：例如，如果 Watch 正在运行ning 则重新运行它。

npm run watch

Add Laravel .env variable to Vue component