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

Question

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

在我的.env文件中,我在var中添加了"MIX_"前缀.

MIX_VAR=key

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

console.log(process.env.MIX_VAR);

结果我不断定义.

我已经尝试清除配置缓存,但仍然遇到同样的问题.有任何想法吗？

Answer 1

在窗口中：

这对我有用，在 webpack.mix 中没有任何要求

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

MIX_API_URL=http://laravel:8000

但是需要重新启动 php artisan serve 并重新启动 npm run watch ....

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

在 linux 或 docker 中：

我还没有使用它们

Answer 2

您必须为要替换的env变量构建JS.您可以使用npm或执行此操作yarn

这对我有用，在 env 文件中添加一个带有以下前缀的新变量：MIX_，但需要重新启动 php artisanserve 并重新启动 npm run watch.... (2认同)

Answer 3

环境变量

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

MIX_SENTRY_DSN_PUBLIC=http://example.com

在 .env 文件中定义变量后，您可以通过 process.env 对象进行访问。如果在运行监视任务时值发生变化，则需要重新启动任务：

process.env.MIX_SENTRY_DSN_PUBLIC

要记住的最重要的事情是你必须使用Laravel Mix才能工作。Mix 是注入环境变量的东西。