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

Posted 2023-02-22

【中文标题】Nuxt.js env 属性，理解以及如何使用？

【英文标题】：Nuxt.js env Property, understanding and how to use it?

【发布时间】：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，但从文档来看，它看起来像添加了额外的复杂层，这对于更简单的设置可能不是必需的。 谢谢。

【参考方案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（其中值可以相同或不同）