Comprehensive Guide to Vite Configuration: Aliases, Plugins, Environment Variables, Build Optimizations, and Code Splitting

Vite is a modern frontend build tool that improves development experience with a fast dev server and Rollup‑based production bundling. The guide starts by recommending a full read of the Vite documentation and explains the two core parts: the dev server with native ES‑module HMR and the Rollup build pipeline.

Path Alias Configuration

Install pnpm add @types/node --save-dev to resolve the "cannot find module 'path'" TypeScript error, then configure resolve.alias in vite.config.ts so that @ maps to the src directory. Two example configurations are provided, one using resolve(__dirname, "src") and another using a custom pathResolve helper.

Plugin Ecosystem

Vite supports an array of plugins. Commonly used ones include @vitejs/plugin-vue-jsx for JSX/TSX, vite-plugin-mock for mock APIs, vite-plugin-svg-icons for SVG handling, unplugin-auto-import/vite and unplugin-vue-components/vite for on‑demand imports, and unocss/vite for atomic CSS. Example snippets show how to add vite-plugin-compression for gzip output and rollup-plugin-visualizer for bundle analysis.

Environment Variables

Vite exposes variables via import.meta.env . Built‑in variables such as MODE , BASE_URL , PROD , DEV , and SSR are described. Only variables prefixed with VITE_ are automatically loaded; custom prefixes can be set with envPrefix . The article shows how to create .env , .env.development , and .env.production files, and how to load them in vite.config.ts using loadEnv . A helper processEnv function converts string values to proper types.

CSS Pre‑processor Options

To share variables globally, configure css.preprocessorOptions (e.g., SCSS additionalData or Less javascriptEnabled ) so that style files are automatically injected.

Dependency Pre‑bundling

Vite pre‑bundles third‑party dependencies for faster dev server start‑up. The optimizeDeps option can force inclusion or exclusion of specific packages, and the cache lives in node_modules/.vite . Commands with --force or manual cache deletion can rebuild the pre‑bundle.

Production Build Tweaks

Use the esbuild option to drop debugger statements and remove console.log calls. The build section also demonstrates custom manualChunks logic to split vendor code (e.g., lodash, element‑plus, vue) into separate files, adjust chunk size warnings, and define output naming patterns.

Code Splitting Strategies

Fine‑grained chunking improves caching and load performance. The guide outlines typical strategies—by feature, route, third‑party library, or shared code—and provides a sample manualChunks function that groups dependencies into lodash‑vendor , el‑vendor , vue‑vendor , and a generic vendor chunk.

Overall, the article equips developers with practical Vite configuration snippets and best‑practice recommendations to streamline development, optimize builds, and maintain a clean TypeScript‑friendly codebase.