Nuxt v2.12.2 SPA模式下nuxt.config.js无法读取环境变量问题

我来帮你分析下问题根源，以及对应的解决办法：

问题核心原因 #

你遇到的问题主要来自两个时机问题：

1. 异步加载dotenv的坑：你用了import('dotenv')动态导入，这是异步执行的，意味着env.config()调用时，dotenv模块还没完全加载完成，没法把.env里的变量正确注入到process.env中。
2. @nuxtjs/dotenv的加载时机：这个模块是在Nuxt的模块初始化阶段才生效的，但nuxt.config.js的顶层代码是在Nuxt启动前就执行了，此时模块还没帮你加载环境变量，必须手动提前加载dotenv。

具体解决方案 #

这里给你两种可行的修改方式，选一种适合你的就行：

方案1：同步加载dotenv并复用变量

把dotenv的加载改成同步的require，提前提取baseUrl变量，在env配置和head里统一复用：

// 改用同步加载dotenv，确保环境变量提前注入
const dotenv = require('dotenv')
dotenv.config()

// 提前提取baseUrl，避免重复判断逻辑
const baseUrl = process.env.BASE_URL || 'http://localhost:3000'

export default {
  mode: 'spa',
  generate: { fallback: true },
  env: {
    baseUrl
  },
  head: {
    meta: [
      { hid: 'og:image', name: 'og:image', content: `${baseUrl}/og/facebook.png` }
    ],
  },
  modules: [ '@nuxtjs/dotenv' ]
  // ...你的其他配置
}

方案2：将head改为函数式写法

如果更习惯用Nuxt注入的$env访问变量，可以把head改成函数，这样能在上下文里拿到Nuxt注入的环境变量：

const dotenv = require('dotenv')
dotenv.config()

export default {
  mode: 'spa',
  generate: { fallback: true },
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },
  // 改成函数，this指向Nuxt上下文，可直接访问$env
  head() {
    return {
      meta: [
        { hid: 'og:image', name: 'og:image', content: `${this.$env.baseUrl}/og/facebook.png` }
      ]
    }
  },
  modules: [ '@nuxtjs/dotenv' ]
  // ...你的其他配置
}

额外验证小贴士 #

• 确保.env文件在项目根目录，变量名拼写完全一致（比如不要写成Base_URL，要和代码里的process.env.BASE_URL匹配）。
• 修改配置或环境变量后，一定要重启Nuxt服务，否则新配置不会生效。
• 可以在nuxt.config.js顶部加一行console.log(process.env.BASE_URL)，启动服务时看控制台输出，验证dotenv是否加载成功。

内容的提问来源于stack exchange，提问作者Simon