Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Konfigurasi Vite

Hasilkan file vite.config.ts/js dari preset framework (Vanilla, React, React SWC, Vue, Svelte, Solid), plugin opsional (SVGR, tsconfig-paths, PWA, kompresi, visualizer bundle), pembuat alias path, editor aturan proxy dev-server, dan opsi build — unduh atau salin, siap diterapkan.

Input

Memilih plugin framework dan import rekomendasinya.

Hanya mengubah nama file/komentar header — body konfigurasi valid baik cara.

Plugin

Alias Path

Satu per baris sebagai alias=path, misalnya @=./src. Biarkan kosong untuk tidak ada.

Dev Server

Default Vite sendiri adalah 5173 — hanya dipancarkan jika Anda mengubahnya.

Satu per baris sebagai path=target, misalnya /api=http://localhost:3000. Biarkan kosong untuk tidak ada.

Build

Opsi Output

Output

Konfigurasi yang Dihasilkan
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/vite-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "framework": "reactSwc",
    "useTypescript": "true",
    "pluginSvgr": "true",
    "pluginTsconfigPaths": "",
    "pluginPwa": "",
    "pluginCompression": "",
    "pluginVisualizer": "",
    "aliases": "@=./src",
    "serverPort": "3000",
    "serverOpen": "true",
    "serverHost": "",
    "proxyRules": "/api=http://localhost:8080",
    "buildTarget": "esnext",
    "outDir": "dist",
    "sourcemap": "",
    "includeComments": "true",
    "includeHeader": "true",
    "includeInstall": "true"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `vite-config-generator` tool (Vite Config Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/vite-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Konfigurasi Vite — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Pembuat Konfigurasi Vite membangun vite.config.ts (atau .js) yang siap digunakan dari beberapa dropdown dan toggle — tidak perlu menghafal nama import plugin, pola alias fileURLToPath/import.meta.url, atau bentuk aturan proxy. Pilih framework Anda, atur beberapa plugin dan alias, dan salin file yang dihasilkan langsung ke proyek Anda.

Yang dilakukannya

Konfigurasi Vite terlihat sederhana sampai Anda membutuhkan alias path, proxy dev-server, atau lebih dari satu plugin — kemudian Anda menggabungkan import, objek resolve.alias, dan entri server.proxy dengan tangan. Alat ini merakit semua itu untuk Anda. Ini mendukung:

  • Preset framework — Vanilla, React (@vitejs/plugin-react), React dengan SWC (@vitejs/plugin-react-swc), Vue 3, Svelte, dan Solid, masing-masing dengan import plugin yang cocok dan perintah install.
  • Plugin fitur — SVGR (impor SVG sebagai komponen React), vite-tsconfig-paths, vite-plugin-pwa, kompresi gzip/Brotli, dan visualizer ukuran bundle, masing-masing toggle independen.
  • Pembuat alias path — satu baris alias=path per alias, dirender sebagai pola fileURLToPath(new URL('./path', import.meta.url)) yang aman ESM (bekerja dari file apa pun, tidak seperti __dirname).
  • Editor proxy dev server — satu baris path=target per aturan, dirender sebagai entri server.proxy dengan changeOrigin: true.
  • Opsi build — target, direktori output, dan sourcemap.
  • TypeScript vs. JavaScript — toggle nama file/komentar header; body yang dihasilkan valid baik cara.

Hanya bagian yang benar-benar Anda ubah dari default Vite sendiri yang muncul di output — tidak ada baris port: 5173 mengulang default, tidak ada blok build kosong — sehingga file terlihat seperti sesuatu yang ditulis orang, bukan dump template.

Cara menggunakannya

  1. Pilih framework Anda.
  2. Toggle plugin apa pun yang Anda butuhkan (SVGR hanya muncul untuk preset React).
  3. Tambahkan alias path, satu per baris sebagai alias=path (misalnya @=./src).
  4. Atur port dev-server khusus, aktifkan open/host, dan tambahkan aturan proxy jika Anda membutuhkannya.
  5. Sesuaikan opsi build jika target atau direktori output Anda bukan default Vite.
  6. Salin konfigurasi yang dihasilkan atau unduh, kemudian jalankan perintah install yang ditunjukkannya.

Output diperbarui secara instan saat Anda mengubah opsi apa pun.

Apakah saya masih perlu menginstal paket-paketnya?

Ya. Alat menghasilkan teks konfigurasi dan perintah install yang cocok, tetapi tidak menginstal apa pun untuk Anda. Jalankan baris npm install -D … yang dihasilkannya (atau setara yarn/pnpm) sehingga Vite dapat menyelesaikan plugin yang direferensikan.

Mengapa alias saya menggunakan fileURLToPath(new URL(...)) alih-alih path.resolve(__dirname, ...)?

vite.config.ts berjalan sebagai modul ES, di mana __dirname tidak tersedia tanpa penyiapan tambahan. Pola fileURLToPath(new URL('./src', import.meta.url)) adalah setara yang aman ESM yang digunakan template Vite sendiri, dan berfungsi sama apakah konfigurasi adalah TypeScript atau JavaScript.

Dapatkah saya menyempurnakan konfigurasi di kemudian hari?

Tentu saja. File yang dihasilkan adalah titik awal biasa — tambahkan lebih banyak plugin, perluas objek resolve.alias/server.proxy, atau lapisi opsi yang tidak dicakup generator ini. Perlakukan output sebagai baseline yang solid, bukan hasil yang terkunci.

Alat terkait

Privasi

Generator ini berjalan sepenuhnya di browser Anda. Pilihan Anda tidak pernah diunggah, dicatat, atau disimpan — konfigurasi dirakit secara lokal dari opsi yang Anda pilih, dan tidak ada yang meninggalkan perangkat Anda.

vitevite.configbundlerbuild toolreactvuesveltesoliddeveloper tools

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan