javascript - วิธีโหลดตัวแปรสภาพแวดล้อมจากไฟล์ .env โดยใช้ Vite

ฉันต้องการโหลดตัวแปรสภาพแวดล้อมจากไฟล์ .env โดยใช้ Vite

ฉันใช้วัตถุ import.meta.env ตามที่ระบุในเอกสาร

ไฟล์ .env:

TEST_VAR=123F

เมื่อพยายามเข้าถึงตัวแปรนี้ผ่าน import.meta.env -> import.meta.env.TEST_VAR มันจะคืนค่าเป็น undefined

แล้วฉันจะเข้าถึงพวกเขาได้อย่างไร?

คำตอบ #1

ตามเอกสาร คุณต้องใส่คำนำหน้าของตัวแปรของคุณด้วย VITE_:

เพื่อป้องกันการรั่วไหลของตัวแปรสภาพแวดล้อมไปยังฝั่งลูกค้าโดยไม่ตั้งใจ เฉพาะตัวแปรที่มีคำนำหน้า VITE_ เท่านั้นที่จะถูกเปิดเผยต่อโค้ดที่ถูกประมวลผลโดย Vite ของคุณ

หากคุณพยายามเข้าถึงตัวแปรสภาพแวดล้อมนอกเหนือจากซอร์สโค้ดของแอปของคุณ (เช่น ภายใน vite.config.js) คุณจะต้องใช้ loadEnv():

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
    // Load app-level env vars to node-level env vars.
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
      // To access env vars here use process.env.TEST_VAR
    });
}

สำหรับ SvelteKit

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }) => {
    // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
    return defineConfig({
        plugins: [sveltekit()]
    }); 
};

คำตอบ #2

ถ้าคุณต้องการเข้าถึงตัวแปรสภาพแวดล้อมของคุณ TEST_VAR คุณควรเติมคำนำหน้า VITE_

ลองอะไรทำนองนั้น

VITE_TEST_VAR=123f

คุณสามารถเข้าถึงมันได้ด้วย

import.meta.env.VITE_TEST_VAR

คำตอบ #3

นี่คือสามข้อผิดพลาด/สิ่งที่ทำให้ฉันสะดุด

• ตรวจสอบให้แน่ใจว่าไฟล์ .env อยู่ในโฟลเดอร์ราก ไม่ใช่ในโฟลเดอร์ src ชื่อไฟล์ .env และ/หรือ .env.development จะใช้งานได้เมื่อรันแบบโลคอล
• รีสตาร์ทเว็บเซิร์ฟเวอร์ท้องถิ่นเพื่อให้ตัวแปรปรากฏ: npm run dev
• ใส่คำนำหน้าตัวแปรด้วย VITE_ (ดังที่ Mahmoud และ Wonkledge กล่าวไปแล้ว)

คำตอบ #4

วิธีแก้อีกวิธีที่ใช้ได้ผลสำหรับผมคือการเรียก dotenv.config() ด้วยตนเองภายใน vite.config.js วิธีนี้จะโหลดตัวแปรจาก .env (ทั้งหมด!) เข้าไปใน process.env:

import { defineConfig } from 'vite'
import dotenv from 'dotenv'

dotenv.config() // load env vars from .env

export default defineConfig({
  define: {
    __VALUE__: `"${process.env.VALUE}"` // wrapping in "" since it's a string
  },
  //....
}

ไฟล์ .env อาจอยู่ที่:

VALUE='My env var value'

ดูตัวอย่าง