Question

我的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组件中提供此数据的最佳方法是什么？

Answer 1

要在Laravel中的Vue组件文件中访问您的env变量，您需要在变量前加上 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 5.6，以防您想要查看。

Answer 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

Answer 3

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

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

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

window.something

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

Answer 4

重要

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

在我杀死开发包并重新运行npm run watch之前，我的工作一直没有。

在vue组件中检索config和env变量

4 个答案:

在.env文件中

在您的Vue组件文件