In my Vue3 application, developed with Vite, I am integrating with a Solidity smart contract on Ropsten using web3js. Additionally, I am utilizing web3.storage to store images on IPFS, with the API key stored in a `.env` file at the project root:
VUE_APP_API_TOKEN=VALUE
VITE_API_TOKEN=VALUE
The issue arises as web3.storage requires the API token to be accessed through `process.env`, but the global `process` variable is not defined within my application. This results in an error: `Uncaught ReferenceError: process is not defined`.
My assumption is that this problem stems from using Vite instead of pure Vue3. I attempted to export `process.env` in the `vite.config.ts` file with the following code, however, it did not resolve the issue:
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 can I access the `process` variable from my Vue files to retrieve the environment variable values and enable web3.storage functionality?