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

Question

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

undefined undefined undefined undefined undefined

Answer 1

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

以下是如何在 Nuxt 插件中使用环境变量：

以下是如何在任何 Nuxt 应用程序中广泛使用它：

是的，这是您需要添加环境变量的地方：

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

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

Environment variables not working on Vercel with Nuxt

javascript

deployment

amazon-web-services

vue.js

nuxt.js