Nuxt.js env 属性，理解以及如何使用？答案

【问题标题】：Nuxt.js env Property, understanding and how to use it?Nuxt.js env 属性，理解以及如何使用？
【发布时间】：2020-08-29 11:25:58
【问题描述】：

关注https://nuxtjs.org/api/configuration-env

我一直在尝试为整个项目在nuxt.config.js once 中设置我的 apiUrl，例如：

export default {
  env: {
    apiUrl: process.env.MY_REMOTE_CMS_API_URL || 'http://localhost:1337'
  }
}

在 nuxt.config.js 中添加它，我希望（并且希望）在项目中 任何地方 都可以访问 apiUrl . 特别是以下 3 种情况需要它：

使用 axios，从动态 url 生成静态页面（在 nuxt.config.js 中）

generate: {
   routes: function () {
      return axios.get(apiUrl + '/posts')
        .then((res) => {
          return res.data.filter(page => {
            return page.publish === true;
          }).map(page => {
            return {
              route: '/news/' + page.slug
            }
          })
        })
    }
  },

使用 apollo，通过 graphql 获取数据（in nuxt.config.js）

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: apiUrl + '/graphql'
      }
    }
  },

在每个布局、页面和组件中，作为媒体的基本网址：
```
<img :src="apiUrl + item.image.url" />
```

如您所见，我只需要“打印”cms 的实际基本网址。我也试过用process.env.apiUrl访问它，没有成功。

我能够做到这一点的唯一方法是创建一个额外的 plugin/apiUrl.js 文件，该文件注入 api url，这对我来说似乎是错误的，因为我现在在我的项目中设置了 apiUrl 两次。

我过去问过这个问题，但方式不太清楚。有人建议我使用 dotenv，但从文档来看，它看起来像添加了额外的复杂层，这对于更简单的设置可能不是必需的。谢谢。

【问题讨论】：

标签： vue.js axios environment-variables nuxt.js apollo

【解决方案1】：

我认为 dotenv 模块确实是您所需要的。

这是我的设置：

项目根目录有一个 .env 文件，其中包含 BASE_URL=https://www.myapi.com
require('dotenv').config() 在 nuxt.config.js 的顶部
@nuxtjs/dotenv 已安装并添加到 nuxt.config.js 的 buildModules
env: { BASE_URL: process.env.BASE_URL} 添加到 nuxt.config.js
axios: { baseURL: process.env.BASE_URL } 添加到 nuxt.config.js（可选）

您应该可以在整个项目中访问您的 .env。 (process.env.BASE_URL)

我没用过apollo，不过你应该可以用process.env.BASE_URL + '/graphql'设置apollo端点

【讨论】：

谢谢，我会尽快尝试一下。我关于 .env 文件的问题可能很愚蠢，但是，我想在我的 git 上创建一个 .env 文件吗？所以这和我当地的不一样？（他们都没有被推或拉）
.env 将是项目根目录下的一个文件。在我的项目中，我将 .env 添加到我的 .gitignore 以防止它存在于我的公共仓库中。
那是我不明白的一点......假设我在 GitLab 中运行一个管道来生成我的站点的静态页面，如果它只在我的本地 .env 文件？

【解决方案2】：

从 Nuxt 2.13 开始，不再需要 @nuxtjs/dotenv。 Read here

我缺少的概念是您在服务器/管道中设置了相同的命名变量，这样您就可以远程拥有（总是本地/从不推送）.env 文件和同名变量，而不是添加到您的repo（其中值可以相同或不同）

【讨论】：