无法在nuxt.config.js中访问env

Question

我在SPA模式下使用Nuxtv2.12.2，并希望在默认的head中使用env变量。然而，我使用的是@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'
  ]

  ...
}

Answer 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'
        }
      ]
    }
  }
}

Answer 2

上面的解决方案(对头部使用一个函数)对我没有作用，但这确实有效：

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

如果您使用NUXT_ENV_，那么env变量在构建时是可用的，并且可以在头中使用！