如何在nuxt.config.ts中使用privateRuntimeConfig的.env值配置Cloudinary模块

你可以根据自己的使用场景选择以下任意一种方案：

方案1：直接读取环境变量赋值 #

Nuxt加载配置时会自动读取根目录.env文件的环境变量，你可以直接在cloudinary配置项中引用process.env即可：

export default defineNuxtConfig({
    privateRuntimeConfig: {
        cloudinary: {
            cloudName: process.env.CLOUDINARY_CLOUD_NAME,
            apiKey: process.env.CLOUDINARY_API_KEY,
            apiSecret: process.env.CLOUDINARY_API_SECRET
        }
    },
    cloudinary: {
        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
        apiKey: process.env.CLOUDINARY_API_KEY,
        apiSecret: process.env.CLOUDINARY_API_SECRET,
    }
})

方案2：抽离变量复用 #

如果想要避免重复写process.env降低出错概率，可以提前把Cloudinary配置抽离为常量，两处配置直接引用该常量即可：

const cloudinaryConfig = {
  cloudName: process.env.CLOUDINARY_CLOUD_NAME,
  apiKey: process.env.CLOUDINARY_API_KEY,
  apiSecret: process.env.CLOUDINARY_API_SECRET
}

export default defineNuxtConfig({
  privateRuntimeConfig: {
    cloudinary: cloudinaryConfig
  },
  cloudinary: cloudinaryConfig
})

额外说明 #

• 如果你使用的是@nuxtjs/cloudinary v2及以上版本，不需要手动填写顶层的cloudinary配置项，模块会自动读取你在privateRuntimeConfig中定义的Cloudinary配置，直接删除冗余的cloudinary配置项即可生效。
• apiSecret属于敏感信息，不要放到publicRuntimeConfig中，避免泄露到客户端。
• 确认你的.env文件存放在Nuxt项目根目录，且变量名和代码中引用的完全一致。

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