1

我在访问部署在 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

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

4

1 回答 1

2

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

以下是如何在 Nuxt 插件中使用环境变量：https ://stackoverflow.com/a/67580298/8816585

以下是如何在任何 Nuxt 应用程序中广泛使用它：https ://stackoverflow.com/a/67705541/8816585

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

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

于 2021-07-25T23:34:08.007 回答