Vite CLI Reference

คำสั่ง Command Line Interface (CLI) ของ Vite ช่วยให้คุณสามารถรันและจัดการแอปพลิเคชันของคุณได้อย่างมีประสิทธิภาพ

คำสั่งพื้นฐาน

`vite` หรือ `vite dev`

เริ่มต้น Vite development server ในโหมด development

bash

vite [root]
# หรือ
vite dev [root]
# หรือ
vite serve [root]

พารามิเตอร์:

[root] (ไม่บังคับ): ระบุไดเรกทอรีรากของโปรเจค (ค่าเริ่มต้น: ปัจจุบัน)

ตัวอย่างการใช้งาน:

bash

# รัน development server ในไดเรกทอรีปัจจุบัน
vite

# ระบุไดเรกทอรีโปรเจค
vite ./my-project

ตัวเลือกของ Development Server

ตัวเลือก	คำอธิบาย
`--host [host]`	ระบุ hostname หรือ IP address ที่จะใช้สำหรับ development server (ค่าเริ่มต้น: 'localhost') ใช้ `0.0.0.0` เพื่ออนุญาตการเข้าถึงจากเครือข่ายท้องถิ่น
`--port <port>`	ระบุพอร์ตที่ต้องการใช้ (ค่าเริ่มต้น: 5173) ระบบจะเลือกพอร์ตถัดไปที่ว่างโดยอัตโนมัติหากพอร์ตที่ระบุไม่ว่าง
`--open [path]`	เปิดเบราว์เซอร์โดยอัตโนมัติเมื่อเริ่มต้น server สามารถระบุ path เฉพาะได้ (เช่น `--open /about`)
`--cors`	เปิดใช้งาน Cross-Origin Resource Sharing (CORS) สำหรับ development server
`--strictPort`	ถ้าเป็น true จะหยุดการทำงานทันทีหากพอร์ตที่ระบุไม่ว่าง (ค่าเริ่มต้น: false)
`--force`	บังคับให้ optimizer ไม่ใช้แคชและรีบันเดิลใหม่ทั้งหมด (ค่าเริ่มต้น: false) มีประโยชน์เมื่อต้องการบังคับ build ใหม่ทั้งระบบโดยไม่ใช้แคชเดิม
`-c, --config <file>`	ระบุไฟล์ config ที่จะใช้ (ค่าเริ่มต้น: `vite.config.js`) ใช้เมื่อต้องการใช้ config file ที่ไม่ใช่ชื่อมาตรฐานหรืออยู่ในตำแหน่งอื่น
`--base <path>`	ระบุ base public path (ค่าเริ่มต้น: '/') ใช้เมื่อ deploy แอปพลิเคชันไปยัง sub-directory (เช่น `--base /my-app/`)
`-l, --logLevel <level>`	กำหนดระดับการแสดง log (ค่าเริ่มต้น: 'info') ตัวเลือก: 'error', 'warn', 'info', 'silent'
`--clearScreen`	กำหนดว่าจะล้างหน้าจอก่อนแสดง log ใหม่หรือไม่ (ค่าเริ่มต้น: true) ปิดการทำงานด้วย `--no-clearScreen`
`--configLoader <loader>`	ใช้ bundle เพื่อรวมการกำหนดค่าด้วย esbuild หรือ runner (ทดลอง) เพื่อประมวลผลทันที (ค่าเริ่มต้น: bundle)
`--profile`	เริ่มต้น Node.js inspector ในตัว (ตรวจสอบคอขวดประสิทธิภาพ)
`-d, --debug [feat]`	เปิดใช้งานโหมด debug สำหรับ feature ที่ระบุ (เช่น `vite --debug=plugin-vue:transform`)
`-f, --filter <filter>`	กรอง module ที่จะแสดงในโหมด debug ใช้ร่วมกับ `--debug` (เช่น `vite --debug --filter vite:import-analysis`)
`-m, --mode <mode>`	ระบุโหมด environment (ค่าเริ่มต้น: 'development' สำหรับ `vite`, 'production' สำหรับ `vite build`)
`-h, --help`	แสดงข้อความช่วยเหลือและรายการคำสั่งทั้งหมด
`-v, --version`	แสดงหมายเลขเวอร์ชันของ Vite

Build Commands

`vite build`

สร้างแอปพลิเคชันสำหรับการใช้งานจริง (production build)

bash

vite build [root]

ตัวอย่างการใช้งาน:

bash

# Build สำหรับ production
vite build

# Build พร้อมระบุโหมด
vite build --mode staging

# Build พร้อมระบุ base path
vite build --base /my-app/

ตัวเลือกของ Build Command

ตัวเลือก	คำอธิบาย
`--target <target>`	ระบุ target environment (ค่าเริ่มต้น: 'modules') ตัวเลือก: 'modules' (ESM), 'esnext', 'es2015' ฯลฯ
`--outDir <dir>`	ระบุไดเรกทอรีสำหรับไฟล์ที่ build แล้ว (ค่าเริ่มต้น: 'dist')
`--assetsDir <dir>`	ระบุไดเรกทอรีย่อยสำหรับเก็บ assets (ค่าเริ่มต้น: 'assets') อยู่ภายใต้ `outDir` ที่ระบุ
`--assetsInlineLimit <number>`	กำหนดขนาดสูงสุด (เป็นไบต์) ที่จะ inline ไฟล์ assets เป็น base64 URL (ค่าเริ่มต้น: 4096) ไฟล์ที่เล็กกว่าจะถูก inline โดยอัตโนมัติ
`--ssr [entry]`	ระบุ entry point สำหรับการ build แบบ Server-Side Rendering (SSR)
`--sourcemap [output]`	สร้าง source maps สำหรับการดีบัก (ค่าเริ่มต้น: false) ตัวเลือก: `true` (สร้างไฟล์ .map), `'inline'` (รวมในไฟล์), `'hidden'` (มี source maps แต่ไม่มีการอ้างอิง)
`--minify [minifier]`	เปิด/ปิดการย่อขนาดโค้ด ตัวเลือก: `true` (ใช้ esbuild), `'esbuild'`, `'terser'` (ขนาดเล็กกว่าแต่ช้ากว่า) หรือ `false` (ปิดการย่อ)
`--manifest [name]`	สร้างไฟล์ `manifest.json` สำหรับการ cache busting (ค่าเริ่มต้น: `false`) ระบุชื่อไฟล์เพื่อเปลี่ยนชื่อไฟล์ที่สร้าง
`--ssrManifest [name]`	สร้างไฟล์ manifest สำหรับ Server-Side Rendering (ค่าเริ่มต้น: `false`) ระบุชื่อไฟล์เพื่อเปลี่ยนชื่อไฟล์ที่สร้าง
`--emptyOutDir`	ล้างไดเรกทอรีเอาต์พุตก่อนสร้าง (ค่าเริ่มต้น: `true` ถ้า outDir อยู่ภายใน root) ระวังการใช้งานกับ root directory
`-w, --watch`	เปิดโหมด watch เพื่อ build ใหม่เมื่อมีการเปลี่ยนแปลงไฟล์ (ค่าเริ่มต้น: `false`) ใช้สำหรับการพัฒนาที่ต้องการ build แบบต่อเนื่อง

`vite preview`

รัน production build ในโหมด local เพื่อทดสอบก่อน deploy

bash

vite preview [root]

ตัวอย่างการใช้งาน:

bash

# Build ก่อน preview
vite build

# รัน preview server
vite preview

# ระบุพอร์ตและ host
vite preview --port 8080 --host

ตัวเลือกของ Preview Command:

ตัวเลือก	คำอธิบาย
`--host`	ระบุ hostname (ค่าเริ่มต้น: 'localhost')
`--port`	ระบุพอร์ต (ค่าเริ่มต้น: 4173)
`--strictPort`	ออกจากโปรแกรมหากพอร์ตไม่ว่าง (ค่าเริ่มต้น: false)
`--https`	เปิดใช้งาน HTTPS (ค่าเริ่มต้น: false)
`--open`	เปิดเบราว์เซอร์เมื่อเริ่มต้น server (ค่าเริ่มต้น: false)
`--outDir <dir>`	ระบุไดเรกทอรีที่ build ไว้ (ค่าเริ่มต้น: 'dist')

`vite optimize`

Optimize dependencies

bash

vite optimize [root]

ตัวเลือกของ Optimize Command:

ตัวเลือก	คำอธิบาย
`--force`	บังคับให้ optimize ใหม่แม้จะมีแคชอยู่ (ค่าเริ่มต้น: false)
`--deps.force`	บังคับให้ optimize dependencies ใหม่ (ค่าเริ่มต้น: false)

ตัวอย่างการใช้งานเพิ่มเติม

การใช้ Environment Variables

bash

# ระบุโหมด environment
vite --mode development
vite build --mode production

# ใช้ .env.local
VITE_API_URL=https://api.example.com vite

# ใช้ .env.development หรือ .env.production โดยอัตโนมัติ
vite # โหลด .env.development
vite build # โหลด .env.production

การใช้กับ Package Scripts

json

{
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview",
		"build:staging": "vite build --mode staging",
		"build:analyze": "vite build --mode analyze"
	}
}

ข้อควรท้าย

ตัวเลือก	คำอธิบาย
`-c, --config <file>`	ระบุไฟล์ config ที่จะใช้ (ค่าเริ่มต้น: `vite.config.js`)
`--base <path>`	ระบุ base public path (ค่าเริ่มต้น: '/') ใช้เมื่อ deploy ไปยัง sub-directory
`-l, --logLevel <level>`	กำหนดระดับการแสดง log ตัวเลือก: 'error', 'warn', 'info', 'silent'
`--configLoader <loader>`	วิธีการโหลด config ตัวเลือก: 'bundle' (ค่าเริ่มต้น), 'runner' (ทดลอง), 'native' (ทดลอง)
`--profile`	เปิดใช้งาน Node.js inspector สำหรับการวิเคราะห์ประสิทธิภาพ (boolean)
`-d, --debug [feat]`	เปิดใช้งานโหมด debug สำหรับ feature ที่ระบุ (string \| boolean)
`-f, --filter <filter>`	กรอง module ที่จะแสดงในโหมด debug (ใช้ร่วมกับ `--debug`)
`-m, --mode <mode>`	ระบุโหมด environment (ค่าเริ่มต้น: 'production' สำหรับ build)
`--outDir <dir>`	ระบุไดเรกทอรีสำหรับไฟล์ที่ build แล้ว (ค่าเริ่มต้น: 'dist')
`--assetsDir <dir>`	ระบุไดเรกทอรีย่อยสำหรับเก็บ assets (ค่าเริ่มต้น: 'assets')
`--assetsInlineLimit <number>`	กำหนดขนาดสูงสุด (เป็นไบต์) ที่จะ inline ไฟล์ assets (ค่าเริ่มต้น: 4096)
`--sourcemap [output]`	สร้าง source maps (ค่าเริ่มต้น: false) ตัวเลือก: `true`, `'inline'`, `'hidden'`
`--minify [minifier]`	เปิด/ปิดการย่อขนาดโค้ด ตัวเลือก: `true`, `'esbuild'`, `'terser'`, `false`
`--manifest [name]`	สร้างไฟล์ manifest.json (ค่าเริ่มต้น: false)
`--ssrManifest [name]`	สร้างไฟล์ manifest สำหรับ SSR (ค่าเริ่มต้น: false)
`--emptyOutDir`	ล้างไดเรกทอรีเอาต์พุตก่อนสร้าง (ค่าเริ่มต้น: true ถ้า outDir อยู่ภายใน root)
`-w, --watch`	เปิดโหมด watch เพื่อ build ใหม่เมื่อมีการเปลี่ยนแปลง (ค่าเริ่มต้น: false)

ตัวอย่างการใช้งานแบบละเอียด

การกำหนดค่าแบบละเอียด

javascript

import { defineConfig } from "vite";

export default defineConfig({
  // ตัวเลือกพื้นฐาน
  root: process.cwd(),
  base: "/",
  mode: "development",

  // ตัวเลือกการ build
  build: {
    outDir: "dist",
    assetsDir: "assets",
    assetsInlineLimit: 4096,
    sourcemap: true,
    minify: "esbuild",
    manifest: false,
    ssrManifest: false,
    emptyOutDir: true,
    rollupOptions: {
      // กำหนดค่า Rollup เพิ่มเติม
    },
  },

  // ตัวเลือก development server
  server: {
    port: 3000,
    open: true,
    cors: true,
  },

  // ตัวเลือก preview server
  preview: {
    port: 4173,
    open: true,
  },
});

การใช้งานกับ TypeScript

typescript

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

สรุปคำสั่งที่สำคัญ

คำสั่ง	คำอธิบาย
`vite`	เริ่มต้น development server (alias: `vite dev`, `vite serve`)
`vite build`	สร้าง production build
`vite preview`	รัน production build ในโหมด local
`vite optimize`	Optimize dependencies
`vite --version`	แสดงหมายเลขเวอร์ชันของ Vite
`vite --help`	แสดงข้อความช่วยเหลือ

ข้อแนะนำเพิ่มเติม

การปรับแต่ง Build
- ใช้ build.rollupOptions สำหรับการปรับแต่งขั้นสูง
- ใช้ build.lib สำหรับการสร้าง libraries
- ใช้ build.ssr สำหรับการกำหนดค่า Server-Side Rendering
การจัดการ Assets
- ไฟล์ในโฟลเดอร์ public จะถูกคัดลอกไปยัง root ของ outDir โดยตรง
- ใช้ import.meta.glob สำหรับ dynamic imports
การปรับแต่ง Performance
- เปิด build.minify สำหรับการย่อขนาดโค้ดใน production
- ใช้ build.sourcemap สำหรับการดีบักใน production
- เปิด build.reportCompressedSize เพื่อดูขนาดไฟล์หลังบีบอัด
การทำงานกับ Environment Variables
- ใช้ .env สำหรับค่าคงที่ทั่วไป
- ใช้ .env.local สำหรับค่าที่เฉพาะเครื่อง
- ใช้ .env.[mode] สำหรับค่าที่เฉพาะโหมดการทำงาน
การดีบัก
- ใช้ vite --debug เพื่อเปิดโหมด debug
- ใช้ vite --filter เพื่อกรอง log การดีบัก
- เปิด vite.config.js และเพิ่ม debug: true ในส่วนของ server หรือ preview

Vite CLI Reference ​

คำสั่งพื้นฐาน ​

vite หรือ vite dev ​

ตัวเลือกของ Development Server ​

Build Commands ​

vite build ​

ตัวเลือกของ Build Command ​

vite preview ​

vite optimize ​

ตัวอย่างการใช้งานเพิ่มเติม ​

การใช้ Environment Variables ​

การใช้กับ Package Scripts ​

ข้อควรท้าย ​

ตัวอย่างการใช้งานแบบละเอียด ​

การกำหนดค่าแบบละเอียด ​

การใช้งานกับ TypeScript ​

สรุปคำสั่งที่สำคัญ ​

ข้อแนะนำเพิ่มเติม ​

Vite CLI Reference

คำสั่งพื้นฐาน

`vite` หรือ `vite dev`

ตัวเลือกของ Development Server

Build Commands

`vite build`

ตัวเลือกของ Build Command

`vite preview`

`vite optimize`

ตัวอย่างการใช้งานเพิ่มเติม

การใช้ Environment Variables

การใช้กับ Package Scripts

ข้อควรท้าย

ตัวอย่างการใช้งานแบบละเอียด

การกำหนดค่าแบบละเอียด

การใช้งานกับ TypeScript

สรุปคำสั่งที่สำคัญ

ข้อแนะนำเพิ่มเติม