Estoy creando una aplicación vue3 (creada con Vite) que interactúa con un contrato inteligente escrito en Solidity y almacenado en Ropsten. Por lo tanto, estoy usando web3js para interactuar con mis contratos inteligentes y también web3.storage para almacenar algunas imágenes en IPFS. Tengo un archivo .env en la raíz de mi proyecto que almacena mi clave API para web3.storage:
VUE_APP_API_TOKEN=VALUE VITE_API_TOKEN=VALUE El problema es que aparentemente web3.storage espera que el token API se almacene en process.env y no puedo acceder a la variable de process global desde mi aplicación. Siempre recibo un error Uncaught ReferenceError: process is not defined .
Creo que esto está relacionado con mi uso de Vite en lugar de Vue3 puro. Intenté exportar el proceso env en el archivo vite.config.ts con ese código pero no funcionó:
export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') }; console.log(process.env.VITE_API_TOKEN) //Works fine: VALUE is logged console.log(process.env.VUE_APP_API_TOKEN) //Works fine: VALUE is logged return defineConfig({ plugins: [vue()] }); } ¿Cómo podría acceder a la variable de process desde mis archivos vue para obtener los valores de mi variable de entorno y hacer que web3.storage funcione?
¡Gracias por tu ayuda!
.env
VITE_WEB3_STORAGE_TOKEN="your_token"SomeComponent.vue: (o cualquier otro archivo de su aplicación, en realidad):
console.log(import.meta.env.VITE_WEB3_STORAGE_TOKEN) // "your_token" Nota : como se especifica en la documentación de vite , solo se expondrán las variables con el prefijo VITE_ :
Para evitar la filtración accidental de variables env al cliente, solo las variables con el prefijo
VITE_se exponen a su código procesado por Vite.