无法访问 nuxt.config.js 中的 env答案

【问题标题】：cannot access env inside nuxt.config.js无法访问 nuxt.config.js 中的 env
【发布时间】：2020-07-09 13:27:58
【问题描述】：

我在 SPA 模式下使用 Nuxt v2.12.2，并希望在默认 head 中使用环境变量。我正在使用@nuxtjs/dotenv，但是当页面呈现时，baseUrl 是未定义的。

我可以从页面布局中访问BaseUrl，但不能从nuxt.config.js 中访问，如下所示。

.env

BASE_URL=https://example.com

nuxt.config.js

const env = import('dotenv')
env.config()

export default {
  mode: 'spa',

  generate: {
    fallback: true
  },

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  head: {
    meta: [
      {
        hid: 'og:image',
        name: 'og:image',
        content: process.env.baseUrl + '/og/facebook.png'
      }
    ],
  },

  modules: [
    '@nuxtjs/dotenv'
  ]

  ...
}

【问题讨论】：

标签： vue.js vuejs2 environment-variables nuxt.js

【解决方案1】：

process.env.baseUrl 在设置head 属性时尚未设置。

一种解决方案是为head 使用函数，该函数将在设置env 后运行：

export default {
  head() {
    return {
      title: this.$route?.title,
      meta: [
        {
          hid: 'og:image',
          name: 'og:image',
          content: process.env.baseUrl + '/og/facebook.png'
        }
      ]
    }
  }
}

【讨论】：

有没有办法在 nuxt.config.js 的 head() 中访问 $route？例如content: process.env.baseUrl + this.$route.path
@Simon 是的，改用普通函数，这样你就可以做到content: process.env.baseUrl + this.$route?.path。查看更新的答案。

【解决方案2】：

上面的解决方案（对头部使用函数）对我不起作用，但这样做：

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env

如果您使用 NUXT_ENV_，则 env 变量在构建时可用并且可以在头部使用！

【讨论】：