Environment Variables and Modes

Built-in Constants

Vite จัดเตรียมค่าคงที่ต่างๆ ที่สามารถใช้ได้ในทุกสภาพแวดล้อม:

ค่าคงที่	ประเภท	คำอธิบาย
`import.meta.env.MODE`	`string`	โหมดที่แอปกำลังทำงานอยู่ (เช่น `'development'`, `'production'`)
`import.meta.env.BASE_URL`	`string`	URL base ที่ใช้ในการเสิร์ฟแอป กำหนดโดยตัวเลือกการตั้งค่า `base`
`import.meta.env.PROD`	`boolean`	แสดงว่าแอปกำลังทำงานในโหมด production หรือไม่ (เมื่อรันเซิร์ฟเวอร์การพัฒนาด้วย `NODE_ENV='production'` หรือรันแอปที่ build ด้วย `NODE_ENV='production'`)
`import.meta.env.DEV`	`boolean`	แสดงว่าแอปกำลังทำงานในโหมด development หรือไม่ (มักจะตรงข้ามกับ `import.meta.env.PROD` เสมอ)
`import.meta.env.SSR`	`boolean`	แสดงว่าแอปกำลังทำงานบน server หรือไม่

Environment Variables

Loading Env Files

ไฟล์ environment	โหลดเมื่อไหร่	รวมในระบบควบคุมเวอร์ชัน
`.env`	โหลดในทุกกรณี	ใช่
`.env.local`	โหลดในทุกกรณี	ไม่
`.env.[mode]`	โหลดเฉพาะโหมดที่ระบุ	ใช่
`.env.[mode].local`	โหลดเฉพาะโหมดที่ระบุ	ไม่

Variable Naming Rules

ตัวแปรสภาพแวดล้อมที่โหลดจะถูกแสดงผ่าน import.meta.env
ตัวแปรที่ขึ้นต้นด้วย VITE_ เท่านั้นที่จะถูกส่งไปยังโค้ดฝั่งไคลเอนต์
ใช้ VITE_ สำหรับตัวแปรที่ต้องการใช้งานในฝั่งไคลเอนต์

bash

VITE_API_URL=https://api.example.com
SECRET_KEY=mysecret  # ไม่สามารถเข้าถึงได้ในฝั่งไคลเอนต์

javascript

// ในโค้ดแอป
console.log(import.meta.env.VITE_API_URL); // ใช้งานได้
console.log(import.meta.env.SECRET_KEY); // undefined

Modes

Default Modes

โหมด	คำสั่ง	คุณสมบัติหลัก	การ optimize
development	`vite` หรือ `vite dev`	มี HMR, ไม่มีการ optimize	ไม่มี
production	`vite build`	มีการ optimize และ minify, มี source maps	มี

Custom Modes

คำสั่งตัวอย่าง	ไฟล์ environment ที่เกี่ยวข้อง	ตัวอย่างการใช้ในโค้ด
`vite --mode staging`	`.env.staging`	`import.meta.env.VITE_API_URL`
`vite --mode test`	`.env.test`	`import.meta.env.VITE_TEST_MODE`

TypeScript Support

Type Definition for Env Variables

สร้างไฟล์ env.d.ts ในโฟลเดอร์ src เพื่อเพิ่ม type definition:

typescript

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  // เพิ่มตัวแปร environment อื่นๆ ที่ใช้ในแอป
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

IntelliSense

เมื่อเพิ่ม type definition แล้ว IDE จะแสดง IntelliSense สำหรับตัวแปร environment:

typescript

console.log(import.meta.env.VITE_API_URL); // IDE จะแสดง type เป็น string

Environment Variables and Modes ​

Built-in Constants ​

Environment Variables ​

Loading Env Files ​

Variable Naming Rules ​

Modes ​

Default Modes ​

Custom Modes ​

TypeScript Support ​

Type Definition for Env Variables ​

IntelliSense ​