tech
Defaultdeesfrzh

Vite

Blitzschnelles Frontend-Build-Tool - sofortiger Dev-Server, optimierte Produktions-Builds mit nativem ESM

TL;DR

Was: Ein Frontend-Build-Tool der nächsten Generation für schnelle Entwicklung.

Warum: Sofortiger Serverstart, blitzschnelles HMR, optimierte Builds, keine Konfiguration nötig.

Quick Start

Neues Projekt erstellen:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Oder mit bestimmtem Framework:

npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template svelte

Öffnen Sie http://localhost:5173

Cheatsheet

BefehlBeschreibung
npm run devDev-Server starten
npm run buildFür Produktion bauen
npm run previewProduktions-Build vorschauen
vite --hostIm Netzwerk freigeben
vite --port 3000Benutzerdefinierter Port

Verfügbare Templates:

  • vanilla, vanilla-ts
  • react, react-ts, react-swc, react-swc-ts
  • vue, vue-ts
  • svelte, svelte-ts
  • preact, preact-ts
  • solid, solid-ts

Gotchas

Environment variables

# .env
VITE_API_URL=https://api.example.com
// Access in code (must start with VITE_)
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);  // 'development' or 'production'

Static assets

// Import as URL
import imgUrl from './img.png';

// Import as raw string
import content from './file.txt?raw';

// Public folder (served at root)
// public/icon.png → /icon.png

Config file

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    outDir: 'build',
  },
});

CSS

// Automatically handled
import './style.css';
import styles from './style.module.css';  // CSS Modules
import './style.scss';  // Sass (npm install -D sass)

Next Steps