Nuxt v2.12.2 SPA模式下默认head中环境变量undefined问题求助

我来帮你分析一下问题所在，以及对应的解决方案：

问题根源 #

你在nuxt.config.js的head选项里直接使用process.env.baseUrl是错误的——Nuxt的env配置项是把变量注入到Nuxt应用的上下文（客户端和服务端的this.$env对象），而不是添加到Node.js的全局process.env里。你在这里访问的process.env.baseUrl根本不存在，所以才会显示undefined。

另外，虽然你手动调用了require('dotenv').config()，但你在head里引用的是baseUrl（你自己定义的别名），而不是.env文件里的原始变量BASE_URL，这也是导致问题的一个点。

解决方案一：直接使用原始环境变量 #

既然你已经手动加载了dotenv，可以直接在head里引用.env里的原始变量process.env.BASE_URL：

修改nuxt.config.js的head部分：

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

这种方式适合静态的head配置，因为它在构建阶段就会被解析。

解决方案二：将head改为函数，通过上下文访问注入的变量 #

如果你想使用env配置里定义的baseUrl别名，可以把head从静态对象改成函数，这样就能访问到Nuxt的上下文，通过this.$env拿到变量：

修改nuxt.config.js的head部分：

head() {
  return {
    meta: [
      { hid: 'og:image', name: 'og:image', content: `${this.$env.baseUrl}/og/facebook.png` }
    ],
  }
},

这种方式更灵活，适合需要根据请求动态调整head内容的场景，在SPA模式下也能正常工作。

额外注意事项 #

1. 既然你已经安装了@nuxtjs/dotenv模块，其实可以去掉手动的require('dotenv').config()调用，模块会自动帮你加载根目录的.env文件。
2. 确保.env文件确实放在项目根目录，并且没有被.gitignore意外过滤（如果需要的话）。
3. 在SPA模式下，generate.fallback: true主要用于静态生成后的404 fallback，对你当前的问题没有影响，可以保留。

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