Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  150] [ 3]  / answers: 1 / hits: 6456  / 2 Years ago, sun, february 13, 2022, 12:00:00

I am creating a vue3 application (created with Vite) that interacts with a smart contract written in Solidity and stored on Ropsten. Therefore I am using web3js to interact with my smart contracts and also in order to store some images on IPFS. I have a .env file at the root of my project storing my API key for :


The problem is that apparently expects the API token to be stored in process.env and I am unable to access the global process variable from my application. I am always getting an error Uncaught ReferenceError: process is not defined.

I think, this is linked to my usage of Vite instead of pure Vue3.
I tried to export process env in the vite.config.ts file with that code but it didn't work:

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()]

How could I access the process variable from my vue files in order to get the values of my environment variable and make work?

More From » vue.js




SomeComponent.vue: (or any other file of your app, really):

console.log(import.meta.env.VITE_WEB3_STORAGE_TOKEN) // "your_token"

Note: as specified in vite documentation, only variables prefixed with VITE_ will be exposed:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

[#363] Monday, February 7, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 517
Total Questions: 101
Total Answers: 96

Location: Egypt
Member since Tue, Jul 6, 2021
3 Years ago
yaquelina questions