3 Vite Tricks I Wish I Knew When I Started

Ever set up a new Vite project and think "okay, now what?" Here are three small configurations that made my dev experience noticeably better. 1. Path Aliases (No More ../../../ ) Deep imports like import { Button } from '../../../components/Button' get messy fast. Vite makes aliases easy. // vite.config.ts import { defineConfig } from ' vite ' ; import path from ' path ' ; export default defineConfig ({ resolve : { alias : { ' @ ' : path . resolve ( __dirname , ' ./src ' ), }, }, }); Now you can write: import { Button } from ' @/components/Button ' ; Much cleaner. If you use TypeScript, also add this to tsconfig.json : { "compilerOptions" : { "baseUrl" : "." , "paths" : { "@/*" : [ "src/*" ] } } } What's happening: You're telling Vite "when you see @/ , look inside the src/ folder." It's like a shortcut on your desktop — same destination, shorter path. 2. Environment Variables Done Right Vite only exposes env variables that start with VITE_ . This is a security feature — it prevents ac