Nuxt.js env 属性，理解和使用方法？

Question

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

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

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

在 nuxt.config.js 中添加这个，我希望（并且希望）有 apiUrl 项目中随处可访问。特别是以下3种情况需要它：

with axios, 从动态 urls (in 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获取数据（在nuxt.config.js）

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

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

如您所见，我唯一需要的是 'print' cms 的实际基础 url。我也尝试使用 process.env.apiUrl 访问它，但没有成功。

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

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

Answer 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 端点

Answer 2

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

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

Nuxt.js env 属性，理解和使用方法？

Nuxt.js env Property, understanding and how to use it?

environment-variables

apollo

vue.js

axios

nuxt.js