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

时间:2018-09-13 14:29:47

标签: laravel vue.js environment-variables laravel-mix

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

在我的.env文件中,我已将'MIX_'前缀添加到变量中。

MIX_VAR=key

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

console.log(process.env.MIX_VAR);

结果一直是不确定的。

我尝试清除配置缓存,但是仍然遇到相同的问题。有什么想法吗?

4 个答案:

答案 0 :(得分:10)

在Windows中:

那对我有用,不需要webpack.mix

...只需在环境文件中添加一个具有以下前缀的新变量: 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中:

我还没有使用它们

答案 1 :(得分:6)

您必须构建JS才能替换env变量。您可以使用npmyarn

https://laravel.com/docs/5.7/mix#running-mix

答案 2 :(得分:4)

从{@ {3}}的官方文档中提取


环境变量

您可以通过在.env文件中的键前面加上MIX_来将环境变量注入Mix中:

MIX_SENTRY_DSN_PUBLIC=http://example.com

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

process.env.MIX_SENTRY_DSN_PUBLIC

要记住的最重要的事情是您必须使用https://laravel.com/docs/5.6/mix#environment-variables才能起作用。混合就是注入环境变量。

答案 3 :(得分:1)

 process.env.MIX_VAR /  process.env.MIX_STRIPE_KEY

无需任何设置即可工作。只需运行此命令

<块引用>

npm run prod