I'm encountering difficulties accessing my environment variables on Vercel. When I test the site on my localhost, everything works fine; however, once it's deployed to Vercel, the access to environment variables in my components and plugins directories becomes problematic. Here is how I am attempting to access them:
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,
}
}
},
I made sure to select all options when adding my environment variables, and they are indeed exposed as well.
https://i.sstatic.net/0JtFH.png https://i.sstatic.net/0RCPW.png
I would greatly appreciate any assistance in resolving this issue.
In response to a suggestion provided, here's what I attempted:
within 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,
},
and within the plugin
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
}
}
})
}
Even after logging the values, I continue to receive undefined:
undefined undefined undefined undefined undefined