ตัวสร้าง Vite Config

สร้าง vite.config.ts ออนไลน์ฟรี พรีเซ็ต React, Vue, Svelte พร้อม proxy, alias @, sourcemap และ minify คัดลอกใช้ได้ทันที ทำงานฝั่ง client ทั้งหมด

Loading tool...

ตัวสร้าง Vite Config คืออะไร?

ตัวสร้าง Vite Config ประกอบไฟล์ vite.config.ts พร้อมใช้ในเบราว์เซอร์ของคุณ เลือกเฟรมเวิร์ก React, Vue หรือ Svelte เพื่อใช้ plugin ที่ถูกต้อง ปรับ proxy ของ /api ไปยังแบ็กเอนด์ ผูก @ กับ /src และเลือก sourcemap กับ minify ได้ผลลัพธ์ TypeScript สด ๆ พร้อมคัดลอกหรือดาวน์โหลด

ประโยชน์หลัก

เริ่มโปรเจกต์ Vite ใหม่โดยไม่ต้องเขียน boilerplate
พรีเซ็ตเฟรมเวิร์กใช้ plugin ที่ถูกต้อง
proxy API ตอนพัฒนาโดยไม่เจอปัญหา CORS
ผลลัพธ์ TypeScript สด ๆ พร้อมคัดลอกและดาวน์โหลด
เป็นส่วนตัวและทันที - ทุกอย่างทำงานในเบราว์เซอร์

กรณีการใช้งาน

•เริ่มโปรเจกต์ React, Vue หรือ Svelte ใหม่อย่างรวดเร็ว
•มาตรฐาน config Vite ทั่วทั้งทีม
•เชื่อม proxy การพัฒนาไปยังแบ็กเอนด์ในเครื่อง
•ตั้ง path alias เพื่อให้ import สะอาดขึ้น

วิธีสร้างไฟล์ Vite Config

วาง config ที่ต้องการ: เลือกเฟรมเวิร์ก React, Vue หรือ Svelte เพื่อใช้ plugin ที่ถูกต้อง
ตั้งค่า dev server: ตั้งพอร์ต เปิด proxy ของ /api ไปยังแบ็กเอนด์ และผูก @ กับ /src
ตรวจผลลัพธ์: config TypeScript จะอัปเดตสดพร้อม plugin, proxy และตัวเลือก build
คัดลอกลงโปรเจกต์: คัดลอกหรือดาวน์โหลด vite.config.ts ไปวางที่ root ของโปรเจกต์

คุณสมบัติหลัก

พรีเซ็ต plugin สำหรับ React, Vue และ Svelte
เลือกพอร์ต dev server พร้อมรองรับ proxy /api
ตั้ง path alias สำหรับ import แบบ @
ตัวเลือก sourcemap และ minify สำหรับ build
ผลลัพธ์ TypeScript สด ๆ พร้อมคัดลอกและดาวน์โหลด
ไม่ต้องอัปโหลด ไม่ต้องมีบัญชี ฝั่ง client ทั้งหมด

คำถามที่พบบ่อย

ผลลัพธ์ที่ได้รองรับ Vite เวอร์ชันใด?

ใช้รูปแบบ defineConfig + plugins + server + build มาตรฐานที่ Vite 4 และ 5 รองรับ โดย plugin อ้างอิงชื่อแพ็กเกจทางการปัจจุบัน

proxy ของ /api ทำอะไรตอนพัฒนา?

ส่งต่อคำขอจากเบราว์เซอร์ที่ขึ้นต้นด้วย /api ไปยัง URL แบ็กเอนด์ของคุณ ช่วยให้การเรียก API ตอนพัฒนาไม่เจอปัญหา CORS ส่วน production ให้ hosting หรือ reverse proxy จัดการ

ทำไมต้องผูก @ กับ /src?

alias @ ทำให้ import แบบ @/components/Button ใช้ได้ไม่ว่าไฟล์จะอยู่ลึกแค่ไหน และ block resolve.alias ทำให้ TypeScript กับ Vite เข้าใจ mapping เดียวกัน

เมื่อไรควรปิด minify?

ปิดชั่วคราวเพื่อดีบักปัญหาที่เกิดเฉพาะ production build ปกติให้เปิด esbuild ไว้ และเลือก terser เมื่อต้องการตัวเลือก compression เฉพาะ

คู่มือฉบับละเอียด

Vite Config Generator: สร้างไฟล์ vite.config.ts ได้ในเบราว์เซอร์

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง Vite Config

เฟรมเวิร์ก

พอร์ต dev server

การย่อโค้ด

ปลายทาง proxy (URL แบ็กเอนด์)

ตัวเลือก

ส่งต่อคำขอ /api ไปยังแบ็กเอนด์

ผูก @ กับ /src

สร้าง sourcemap สำหรับ production build

ไฟล์ vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild',
  },
});

เกี่ยวกับเครื่องมือนี้

ตัวสร้างนี้ประกอบไฟล์ vite.config.ts พร้อมใช้ในเบราว์เซอร์ของคุณ เลือกเฟรมเวิร์กเพื่อใช้ plugin ที่ถูกต้อง เปิด proxy ของ /api ไปยังแบ็กเอนด์ ผูก @ กับ /src และเลือกพฤติกรรม sourcemap กับ minify ผลลัพธ์อัปเดตสด คัดลอกไปใช้ในโปรเจกต์ได้ทันที หรือดาวน์โหลดเป็น vite.config.ts

ทำไมต้องใช้

เริ่มโปรเจกต์ Vite ใหม่โดยไม่ต้องเขียน boilerplate
proxy API ตอนพัฒนาโดยไม่เจอปัญหา CORS
พรีเซ็ตเฟรมเวิร์กใช้ plugin ที่ถูกต้อง
ผลลัพธ์เป็น TypeScript มาตรฐานรองรับ Vite 5+
ทำงานฝั่ง client ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องมีบัญชี

คุณสมบัติ

พรีเซ็ต plugin สำหรับ React, Vue และ Svelte
เลือกพอร์ต dev server พร้อม proxy /api
ตั้ง path alias สำหรับ import แบบ @
ตัวเลือก sourcemap และ minify สำหรับ build
ผลลัพธ์สด ๆ พร้อมคัดลอกและดาวน์โหลด

Loading tool...