Why enviroment variables don't work in vite project

Question

I'm trying to work with environment variables in my Vite, Vue 3 and Firebase project but when I compile I get the following error: "process is not defined"

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import './style.css'
import App from './App.vue'

const pinia = createPinia()

createApp(App)
  .use(pinia)
  .use(router)
  .mount('#app')

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // configure Vite to recognize the "@" symbol as the "src" folder in your project, you can modify the "resolve.alias"
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
})

En el "firebaseInit.js"

//"firebaseInit.js"

import { initializeApp } from 'firebase/app';


const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
}

const appFirebase = initializeApp(firebaseConfig);

export default appFirebase;

if i try chance "process.env" for "import.meta.env" don't work to.

How can I properly configure the environment variables?

Answer 1

You must use prefix VITE_ for all environment variables and then use them in you code with import.meta.env.

Example using file to set environment variables:

.env.development in project root folder:

VITE_FIREBASE_API_KEY=abc123

firebaseInit.js:

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  ...
}

Build script in package.json:

build-dev: "vite build --mode development"