Configuring Vite

Vite จะพยายามหาไฟล์ config ชื่อ vite.config.js โดยอัตโนมัติ รองรับทั้ง JavaScript และ TypeScript config

Config Intellisense

ใช้ TypeScript typings สำหรับ intellisense แนะนำให้ใช้ defineConfig helper

import { defineConfig } from "vite";

export default defineConfig({
  // ...
});

Conditional Config

กำหนดค่าแบบมีเงื่อนไขตาม command และ mode แยก config ระหว่าง development และ production

export default defineConfig(({ command, mode }) => {
  if (command === "serve") {
    return {/* dev config */};
  } else {
    return {/* build config */};
  }
});

Async Config

รองรับการกำหนดค่าแบบ asynchronous เหมาะสำหรับกรณีที่ต้องโหลดข้อมูลก่อน

export default defineConfig(async () => {
  const data = await asyncFunction();
  return {/* config */};
});

Environment Variables

ใช้งาน environment variables ใน config สามารถใช้ loadEnv helper สำหรับโหลด .env files

import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  };
});

Debugging

ตั้งค่า VS Code สำหรับ debugging config file เพิ่ม configuration ใน .vscode/settings.json

{
	"debug.javascript.terminalOptions": {
		"resolveSourceMapLocations": [
			"${workspaceFolder}/**",
			"!**/node_modules/**",
			"**/node_modules/.vite-temp/**"
		]
	}
}