No Login Data Private Local Save

Vite Config Generator - Online vite.config.js Builder

8
0
0
0

Vite Config Generator

Build your perfect vite.config visually

🚀 Quick Presets
Public base path, e.g. /my-app/
Project root (leave empty for default)
Use 0.0.0.0 for LAN access
→
Default 4096 (4KB)
@
→
@
→
Enter valid JSON, e.g. {"__DEV__": true}

Generated Config

vite.config.ts
Auto-updates as you configure

Frequently Asked Questions

The vite.config.js (or vite.config.ts) is the central configuration file for Vite-based projects. It controls everything from the dev server port and build output directory to plugin registration and path aliases. Without it, Vite uses sensible defaults, but customizing it unlocks the full power of the Vite ecosystem — including framework plugins (React, Vue), CSS preprocessors, proxy rules, and optimized builds.

The primary difference is TypeScript support. A vite.config.ts file provides full type-checking and autocompletion for your Vite configuration when using the defineConfig helper from Vite. The JavaScript version (vite.config.js) works identically at runtime but lacks IntelliSense benefits. Both generate the same output — choose .ts if your project already uses TypeScript.

Path aliases are configured under the resolve.alias section of your Vite config. Common examples include mapping @ to ./src or @components to ./src/components. You'll also need to update your tsconfig.json (for TypeScript) with corresponding paths entries so your editor recognizes the aliases. Use the Resolve tab in this generator to visually add and manage aliases.

Use the server.proxy configuration to forward API requests during development. For example, you can proxy all /api requests to a backend running on http://localhost:3000. This eliminates CORS issues during development and is configured in the Dev Server tab of this generator. Simply add your proxy rules with the source path and target URL.

The essential plugins depend on your framework: @vitejs/plugin-react for React projects (enables Fast Refresh and JSX transform), @vitejs/plugin-vue for Vue projects (enables SFC compilation). Additional useful plugins include vite-plugin-compression for gzip/brotli compression, rollup-plugin-visualizer for bundle analysis, and vite-plugin-pwa for Progressive Web App support. Choose plugins in the Plugins tab above.

Key production optimizations include: setting build.minify to terser for better compression (though esbuild is faster), enabling build.cssCodeSplit, setting an appropriate build.chunkSizeWarningLimit, and using build.rollupOptions for manual chunk splitting. Also configure optimizeDeps to pre-bundle specific dependencies. Use the Build tab and Advanced tab in this generator to fine-tune these settings.

Yes! Vite exposes environment variables prefixed with VITE_ (configurable via envPrefix) to your client code through import.meta.env. You can also use a .env file at the project root. For server-side config, you can use loadEnv() from Vite to access environment variables inside vite.config.js. Configure the env prefix in the Basic tab of this generator.

Vite's Library Mode is designed for building reusable libraries (npm packages) rather than applications. It outputs optimized bundles in multiple formats (ES, CJS, UMD) with proper external dependency handling. Use the Library preset in this generator to quickly configure a library build with appropriate build.lib settings including entry point, library name, and output formats.
🔧 Related Tools