在 vue 组件中检索配置和环境变量答案

【问题标题】：Retrieve config and env variable in vue component在 vue 组件中检索配置和环境变量
【发布时间】：2018-07-24 22:42:00
【问题描述】：

我的 Laravel 应用程序中有一个 Vue 组件。

我想直接在我的 Vue 组件中检索配置（或 .env Laravel 文件）中的 URL，而不是对其进行硬编码。在 webpack laravel mix 中，我可以像这样检索我的 .env 变量。

require('dotenv').config() let proxyUrl = process.env.APP_URL

但是当我想在我的 app.js 中执行此操作时，我在尝试要求 dotenv 时有一个 can't resolve fs。

让这些数据在我的 Vue 组件中可用的最佳方式是什么？

【问题讨论】：

标签： javascript php laravel webpack vue.js

【解决方案1】：

您可以在 Blade 模板中执行此操作：

let window.something = {{ config('seme_config.something') }}

然后只需在 JS 中使用变量：

window.something

另外，您不应该直接使用 env() 助手。仅从配置文件中提取数据。

【讨论】：

我不确定我是否理解。在我的 app.js 中，我无法使用 Blade 模板。
在其中包含 app.js (<script src="app.js"></script>) 的脚本，在该刀片文件中添加 <script>let window.something = {{ config('some_config.something') }} </script>
@Komarzer 如果你不喜欢这个解决方案，你可以read a config file 并在app.js 中解析它，或者使用一些允许你自动执行此操作的包。

【解决方案2】：

我遇到了同样的问题，但是将变量放在刀片中对我来说不是一个选项，这也意味着在刀片文件中声明一个变量，然后在一个看起来有点杂乱无章的 javascript 文件中使用。因此，如果您处于相同的位置，那么我认为有更好的解决方案。如果您使用的是 Vue，那么您很可能正在使用 Laravel mix 编译文件。

如果是这种情况，您可以将环境变量注入 Mix，您只需添加前缀 MIX_。因此，您可以在 .env 文件中添加如下变量：

MIX_SENTRY_DSN_PUBLIC=http://example.com

然后在你的 javascript 文件中像这样访问这个变量：

process.env.MIX_SENTRY_DSN_PUBLIC

您可以在预编译文件中的任何位置访问它。你可以在 laravel 文档中找到这些信息。 https://laravel.com/docs/5.6/mix#environment-variables

【讨论】：

我有同样的问题，我收到错误 ReferenceError: process is not defined 有什么帮助吗？

【解决方案3】：

要在 Laravel 的 Vue 组件文件中访问你的环境变量，你需要在你的变量前面加上 MIX_。

在 .env 文件中

以您的情况为例，如果您打算在 .env 文件中使用 APP_URL 作为变量，而不是 APP_URL，则应使用 MIX_APP_URL 喜欢：

MIX_APP_URL=http://example.com

在你的 Vue 组件文件中

然后，您可以使用脚本中的 process.env 对象访问该变量，例如：

process.env.MIX_APP_URL

假设今天您设置了一个名为 proxyUrl 的属性并将变量分配为其值，在您的 .vue 文件中的脚本中，代码应如下所示：

export default {
  data () {
        return {
          proxyUrl: process.env.MIX_APP_URL,
        },
  }
}

之后你应该能够像往常一样在你的 vue 模板中检索属性：

<template>
    <div>

        //To print the value out
        <p>{{proxyUrl}}</p>

        // To access proxyUrl and bind it to an attribute
        <div :url='proxyUrl'>Example as an attribute</div>
    </div>
</template>

这里是official doc released in Laravel 8.x，如果你想看看的话。

【讨论】：

执行此操作后，您确实需要重新启动 npm run watch。

【解决方案4】：

重要

您必须重新加载捆绑包才能使更改生效。

直到我杀死了开发包并重新运行npm run watch，我的才工作。

【讨论】：