Option details
base: Configure the basic path
Typically used to specify the path prefix applied in a production environment.
build: build options
outDir: Output directory.
assetsDir: The directory where static resources are stored.
assetsInlineLimit: Static resource inline limit.
cssCodeSplit: Enable/disable CSS code splitting.
sourcemap: Generate sourcemap file.
rollupOptions: Rollup related configuration.
minify: Enable/disable compression. You can choose esbuild or terser, or set to false.
chunkSizeWarningLimit: The chunk size limit that triggers the warning.
emptyOutDir: Clear the output directory before building.
manifest: Generate manifest file.
ssrManifest: Generates the SSR manifest file.
target: build the target.
server: development server configuration
host: Server host.
port: Server port.
strictPort: Whether to exit if the port is occupied.
https: Enable https.
open: Automatically open the browser.
proxy: Configure the proxy.
cors: Enable CORS.
hmr: Hot module replacement configuration.
preview: Preview server configuration
Similar to server, but used for vite preview command. ## plugins: Configure plugins.
css: CSS related configuration
preprocessorOptions: CSS preprocessor options.
postcss: PostCSS configuration.
resolve: parsing options
alias: path alias.
extensions: Automatically resolve extensions.
esbuild: ESBuild configuration
jsxFactory: JSX factory function.
jsxFragment: JSX snippet.
jsxInject: Inject JSX factory functions.
minify: Enable/disable compression.
assetsInclude: Specify the static resource file type
define: define global constant replacement
logLevel: log level
envPrefix: environment variable prefix
json: JSON configuration
namedExports: Enable named export.
stringify: Enable JSON stringification.
worker: Worker configuration
format: Worker format.
plugins: Worker plugin.
These options cover common configuration requirements for most Vite projects. These options are flexibly configured according to your project requirements. If you have more customization needs, you can also refer to the official Vite documentation for detailed configuration options and usage.
import { defineConfig } from 'vite'
export default defineConfig({
// Basic path base: '/',
// Output directory build: {
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: {
input: 'src/',
output: {
// Can configure output options },
},
minify: 'esbuild', // 'terser' or false chunkSizeWarningLimit: 500,
emptyOutDir: true,
manifest: false,
ssrManifest: false,
target: 'modules',
},
// Development server configuration server: {
host: 'localhost',
port: 3000,
strictPort: false,
https: false,
open: true,
proxy: {
'/api': {
target: '',
changeOrigin: true,
rewrite: path => (/^\/api/, '')
}
},
cors: true,
hmr: true, // Hot module replacement },
// Preview server configuration preview: {
host: 'localhost',
port: 5000,
strictPort: false,
https: false,
open: true,
cors: true,
},
// Plug-in plugins: [
// Add plugins here ],
// CSS related configuration css: {
preprocessorOptions: {
scss: {
additionalData: `$injectedColor: orange;`
}
},
postcss: {
plugins: [
// PostCSS plugin ]
},
},
// parse configuration resolve: {
alias: {
'@': '/src',
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
},
// ESBuild configuration esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: `import React from 'react'`,
minify: true,
},
// Static resource processing assetsInclude: ['**/*.gltf'],
// Define global constant replacement define: {
__APP_VERSION__: ('1.0.0'),
},
// Log level logLevel: 'info', // 'info', 'warn', 'error', 'silent'
// Environment variable prefix envPrefix: 'VITE_',
// JSON configuration json: {
namedExports: true,
stringify: false,
},
// Worker configuration worker: {
format: 'iife',
plugins: []
}
})Summarize
This is the end of this article about common configuration options for Vite. For more information about common configuration options for Vite, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!