Using Vue I’m trying to access some environment variables that contain sensitive data using process.env.ENV_VAR
and it works locally but it doesn’t work with Cloudflare Pages, after reading their docs it seems I have to use fetch to access the env vars (https://developers.cloudflare.com/workers/configuration/environment-variables/) but I don’t quite understand how should I access the env vars, what I ended up doing is create a env_data.js file that should export the env vars, the file contains are:
let TURNSTILE_SITE_KEY;
let TURNSTILE_SECRET_KEY;
function fetch(request, env, ctx) {
TURNSTILE_SITE_KEY = env.TURNSTILE_SITE_KEY;
TURNSTILE_SECRET_KEY = env.TURNSTILE_SECRET_KEY;
}
fetch()
export default {
TURNSTILE_SITE_KEY,
TURNSTILE_SECRET_KEY
}
I import it with import env_data from "@/env_data.js";
and try to access the data with env_data.TURNSTILE_SITE_KEY
but it doesn’t work as Cloudflare errors when building the functions:
Error: Failed to publish your Function. Got error: Uncaught TypeError: Cannot read properties of undefined (reading 'TURNSTILE_SITE_KEY')
at functionsWorker-0.5745917335237649.js:5:28 in fetch2
at functionsWorker-0.5745917335237649.js:8:1
How should I access the environment variables?