reactjs - vite miljøvariabel returnerer undefined i produksjon med vercel

Vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

og dette er .env-filen:

VITE_API_KEY = "someKey"
VITE_API_BASE_URL = "baseurl"

Jeg bruker variablene i prosjektet mitt på denne måten:

const BASE_URL = import.meta.env.VITE_API_BASE_URL;
const key = import.meta.env.VITE_API_KEY;
console.log(BASE_URL , key)

Dette fungerer bra på min localhost, men når jeg distribuerer prosjektet på Vercel, går appen i stykker, og console.log(BASE_URL, key) gir meg undefined undefined. Noen idé? Dette er mitt første prosjekt på Vite, og jeg har utforsket noen lignende spørsmål, men løste ikke problemet mitt.

Svar #1

Min løsning var å definere dem inne i definedConfig-funksjonen i vite.config.ts-filen. Noe som dette

export default defineConfig({
  plugins: [react()],
  define: {
    "process.env": process.env,
    ENV_KEY: process.env.ENV_KEY,
  },
});

Og jeg kan nå bruke det

someObj: {
  key: import.meta.env.ENV_KEY,
},

Jeg er ikke helt sikker på om det er nødvendig å definere process.env innenfor funksjonen

  • https://vercel.com/docs/frameworks/vite#environment-variables
  • https://vitejs.dev/config/#using-environment-variables-in-config

Svar #2

For å deklarere en miljøvariabel for Vercel-distribusjonen din, gå til siden for miljøvariabler i Prosjektinnstillinger på Vercel-dashboardet. Derfra kan du skrive inn nøkkel-/verdiparene for miljøvariablene dine og klikke 'Legg til' for å legge dem til prosjektet.

Du kan deretter få tilgang til dem som import.meta.env.VITE_API_KEY

Du kan se hvordan du setter miljøvariabler i Vercel-dokumentasjonen på følgende lenke: https://vercel.com/docs/concepts/projects/environment-variables

Relaterte artikler