Vite Shared Config Options

Vite's Shared Config Options เป็นตัวเลือกการกำหนดค่าทั่วไปที่สามารถใช้ได้ทั้งใน development และ production

root

ไดเรกทอรีรากของโปรเจคที่ใช้เป็นจุดเริ่มต้นสำหรับการ resolve paths ทั้งหมด ค่าเริ่มต้นคือ current working directory (process.cwd())

import path from "node:path";
import { defineConfig } from "vite";

export default defineConfig({
  // ระบุไดเรกทอรีรากของโปรเจค
  root: path.resolve(__dirname, "src"),
});

base

Base public path สำหรับแอปพลิเคชัน ใช้เมื่อ deploy ไปยัง sub-directory บนเซิร์ฟเวอร์ ควรขึ้นต้นและลงท้ายด้วย / เมื่อระบุ path ย่อย

import { defineConfig } from "vite";

export default defineConfig({
  // ใช้เมื่อ deploy ไปยัง sub-path
  base: "/my-app/",
});

mode

โหมดการทำงานของ Vite ใช้กำหนดสภาพแวดล้อมการทำงานระหว่าง development และ production ส่งผลต่อการโหลดไฟล์ .env และการ optimize ต่างๆ

import { defineConfig } from "vite";

export default defineConfig(({ mode }) => ({
  // ใช้ค่า mode ในการกำหนดค่าต่างๆ
  define: {
    __APP_MODE__: JSON.stringify(mode),
  },
}));

define

กำหนดค่าคงที่แบบ global ที่จะถูกแทนที่ในระหว่างการ build ด้วยการแทนที่ข้อความ มีประโยชน์สำหรับการกำหนดค่าที่ต้องการให้ compile-time

import { defineConfig } from "vite";

export default defineConfig({
  define: {
    // ตัวแปร global
    __VERSION__: JSON.stringify("1.0.0"),
    // process.env.NODE_ENV จะถูกแทนที่โดยอัตโนมัติ
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
});

resolve.alias

กำหนด aliases สำหรับทำให้การ import โมดูลต่างๆ สะดวกยิ่งขึ้น สามารถใช้ path แบบ absolute หรือกำหนดเป็น object ได้

import path from "node:path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
});

css.preprocessorOptions

กำหนดค่า options สำหรับ CSS preprocessors ต่างๆ เช่น Sass, Less, Stylus ช่วยให้กำหนดตัวแปร global และ options อื่นๆ ได้

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
      less: {
        math: "always",
      },
    },
  },
});

publicDir

กำหนดไดเรกทอรีสำหรับ static assets ที่จะถูกคัดลอกไปยังโฟลเดอร์ build ไฟล์ในนี้จะไม่ถูก process โดย Vite

import { defineConfig } from "vite";

export default defineConfig({
  // ปิดการใช้งาน public directory
  publicDir: false,
  // หรือระบุ path เอง
  // publicDir: 'public'
});

cacheDir

กำหนดไดเรกทอรีสำหรับเก็บแคชของ Vite เพื่อเพิ่มความเร็วในการ build ครั้งถัดไป ค่าเริ่มต้นคือ node_modules/.vite

import { defineConfig } from "vite";

export default defineConfig({
  // เปลี่ยนตำแหน่งแคช
  cacheDir: "node_modules/.vite-cache",
});

resolve.extensions

กำหนดลำดับของไฟล์ extensions ที่จะลอง resolve เมื่อ import โดยไม่ระบุ extension เรียงลำดับตามความถี่การใช้งานเพื่อประสิทธิภาพ

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
  },
});

css.modules

กำหนดค่า CSS Modules สำหรับการ scope style ให้เฉพาะคอมโพเนนต์ ช่วยป้องกันการชนกันของชื่อคลาสระหว่างคอมโพเนนต์

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    modules: {
      scopeBehaviour: "local",
      generateScopedName: "[name]__[local]___[hash:base64:5]",
      hashPrefix: "prefix",
      globalModulePaths: [/global\.css$/],
    },
  },
});

export default defineConfig({ // โครงสร้างพื้นฐาน root: process.cwd(), base: '/my-app/', mode: 'development',

// กำหนดค่าคงที่แบบ global define: { APP_VERSION: JSON.stringify('1.0.0'), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) },

// ระบุ plugins plugins: [vue()],

// กำหนดไดเรกทอรี publicDir: 'public', cacheDir: 'node_modules/.vite',

// การ resolve modules resolve: { alias: { '@': path.resolve(__dirname, './src'), '~bootstrap': 'bootstrap', }, dedupe: ['vue'], // หลีกเลี่ยงการโหลด Vue ซ้ำ conditions: ['import', 'require', 'default'], mainFields: ['module', 'jsnext:main', 'jsnext', 'browser', 'main'], extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.vue'], preserveSymlinks: false },

// กำหนดค่า HTML html: { cspNonce: 'random-nonce-value' },

// กำหนดค่า CSS css: { modules: { scopeBehaviour: 'local', localsConvention: 'camelCaseOnly', }, postcss: { plugins: [ require('autoprefixer'), require('postcss-nested') ] }, preprocessorOptions: { scss: { additionalData: @import "./src/styles/variables.scss"; @import "./src/styles/mixins.scss"; }, less: { math: 'always', globalVars: { mainColor: 'red' } } }, preprocessorMaxWorkers: 4, devSourcemap: true } })

ตัวอย่างการใช้ Environment Variables

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My Awesome App

console.log(import.meta.env.VITE_API_URL); // https://api.example.com
console.log(import.meta.env.VITE_APP_TITLE); // My Awesome App