如何将Nuxt模块配置密钥移入runtimeConfig作用域？

1. 在runtimeConfig中声明密钥 #

打开nuxt.config.ts，在runtimeConfig字段下添加你的密钥。注意区分服务器端专属（runtimeConfig根字段）和客户端可访问（runtimeConfig.public）：

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅服务器端能读取，环境变量NUXT_API_SECRET会自动覆盖此默认值
    apiSecret: '原模块配置里的默认密钥',
    public: {
      // 若密钥需客户端访问，在此定义，环境变量前缀为NUXT_PUBLIC_
      // apiPublicKey: '原公开密钥'
    }
  }
})

2. 更新模块配置，关联runtimeConfig #

根据你使用的模块类型，选择对应方式关联密钥：

• 模块支持runtimeConfig引用：部分社区模块已支持直接读取runtimeConfig，只需在模块配置中指定密钥来源：

  export default defineNuxtConfig({
    runtimeConfig: {
      apiSecret: '原默认密钥'
    },
    <你的模块名>: {
      apiKey: '<%= runtimeConfig.apiSecret %>'
    }
  })
  

• 模块不支持自动关联：如果是自定义模块或旧版模块，需要在模块的setup函数中手动读取runtimeConfig并覆盖模块配置：

  export default defineNuxtModule({
    setup(options, nuxt) {
      const apiSecret = nuxt.options.runtimeConfig.apiSecret
      // 将runtimeConfig的密钥赋值给模块配置
      options.apiKey = apiSecret
    }
  })
  

3. 用环境变量覆盖密钥 #

现在可以通过环境变量直接覆盖密钥，无需修改代码：

• 开发环境：在项目根目录的.env文件中添加：

  NUXT_API_SECRET=你的实际密钥
  

• 生产环境：直接在部署环境中设置NUXT_API_SECRET环境变量即可。

验证迁移效果 #

在服务器端代码中通过useRuntimeConfig()获取密钥，确认是否为环境变量设置的值：

const config = useRuntimeConfig()
console.log(config.apiSecret)

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