javascript - 在 vue 组件中检索配置和环境变量

Question

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

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

要求('dotenv').config()
让 proxyUrl = process.env.APP_URL

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

在我的 Vue 组件中提供这些数据的最佳方式是什么？

Answer 1

要在 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 ，以防你想看看。