环境变量不适用于带有 Nuxt 的 Vercel

Posted 2023-02-22

【中文标题】环境变量不适用于带有 Nuxt 的 Vercel

【英文标题】：Environment variables not working on Vercel with Nuxt

【发布时间】：2021-10-01 23:58:27

【问题描述】：

我在访问部署在 Vercel 上的环境变量时遇到问题。 在我的笔记本电脑的 localhost 上测试该站点时，它运行良好，但一旦部署到 Vercel 就无法运行。 我正在尝试访问我的components 和plugins 目录中的环境变量，我正在使用

computed: 
  config() 
    return
      bucketName: process.env.AWS_BUCKET_NAME,
      dirName: process.env.AWS_DIR_NAME_1,
      region: process.env.AWS_REGION_1,
      accessKeyId: process.env.AWS_ID,
      secretAccessKey: process.env.AWS_SECRET,
    
  
,

添加我的环境变量时选择了所有选项并且它们也暴露了

请问，可能是什么问题？

---

根据下面的建议，这是我尝试过的

在nuxt.config.js

privateRuntimeConfig: 
  bucketName: process.env.AWS_BUCKET_NAME,
  dirName: process.env.AWS_DIR_NAME_1,
  region: process.env.AWS_REGION_1,
  accessKeyId: process.env.AWS_ID,
  secretAccessKey: process.env.AWS_SECRET,
,

在插件中

import Vue from 'vue'
import S3 from "aws-s3";

export default ( $config:  bucketName, dirName, region, accessKeyId, secretAccessKey  ) => 
  Vue.mixin(
    methods:
      async uploadToS3(file) 
        const config = 
          bucketName,
          dirName,
          region,
          accessKeyId,
          secretAccessKey,
        
        console.log(bucketName, dirName, region, accessKeyId, secretAccessKey);

        const S3Client = new S3(config)
        let uploadedData = S3Client.uploadFile(file, this.getRandomName(30))
        return uploadedData
      
    
  )

当我console.log 的值时，我确实得到了undefined

未定义未定义未定义未定义未定义

【参考方案1】：

您不应该访问这样的变量，而应该使用 publicRuntimeConfig 变量。

这是在 Nuxt 插件中使用环境变量的方法：https://***.com/a/67580298/8816585

这是在任何 Nuxt 应用程序中广泛使用它的方法：https://***.com/a/67705541/8816585

是的，这是您需要添加环境变量的地方：https://***.com/a/67389035/8816585

我希望你在本地使用.env 文件来测试一下？您能否添加更多详细信息以确保您以正确的方式执行此操作？

【讨论】：

再次感谢您的回复，我尝试了您推荐的内容，但未定义，我已经用我尝试过的内容和结果更新了问题

@OpeyemiOdedeyi 我谈过publicRuntimeConfig 而不是privateRuntimeConfig 是有原因的。 Private 只能在服务器上使用（纯 node.js 函数，nuxtServerInit 等）。对于您的变量，您需要将它们放在公共变体中。因为这些将在客户端上可用，但您只能将“公共”环境变量传递给客户端。归根结底，这些变量并不是那么秘密，因为它们可能是为了由前端使用。对于一些真正需要私有的变量，您需要一个后端中间件或类似的东西来隐藏它们。