vue.js - 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 种情况需要它:

与 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 获取数据(在 nuxt.config.js 中)

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

在 每布局、页面和组件，作为媒体的基本 url:

<img :src="apiUrl + item.image.url" />

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

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

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

Answer 1

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

这是我的设置:

项目根目录有一个 .env 文件，其中包含
BASE_URL= https://www.myapi.com

require('dotenv').config()在 nuxt.config.js

顶部

@nuxtjs/dotenv安装并添加到 buildModules nuxt.config.js

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