Common Vite Configuration Options for Efficient Frontend Development

css.preprocessorOptions

Configuration options passed to CSS preprocessors, such as defining a global SCSS variable.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;` // global variable
      }
    }
  }
});

You can also import a global variables file:

// src/assets/styles/variables.scss
$injectedColor: orange;
$injectedFontSize: 16px;

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';` // import global file
      }
    }
  }
});

These variables can then be used in .scss or .vue files.

css.postcss

PostCSS is a toolbox for processing CSS with plugins, handling compatibility and adaptation issues.

Vite supports PostCSS; install plugins like postcss-px-to-viewport for responsive layout:

npm install postcss-px-to-viewport -D

// vite.config.js
import { defineConfig } from 'vite';
import postcssPxToViewport from 'postcss-px-to-viewport';
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        // viewport layout adaptation
        postcssPxToViewport({
          viewportWidth: 375
        })
      ]
    }
  }
});

This converts px units to vw/vh, simplifying responsive design.

resolve.alias

Define path aliases for the src directory:

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src') // path alias
    }
  }
});

Alternatively, use the vite-aliases plugin to auto‑generate aliases for common folders.

// vite.config.js
import { defineConfig } from 'vite';
import { ViteAliases } from './node_modules/vite-aliases';
export default defineConfig({
  plugins: [
    ViteAliases()
  ]
});

Resulting aliases:

src -> @
  assets -> @assets
  components -> @components
  router -> @router
  stores -> @stores
  views -> @views
  ...

resolve.extensions

List of file extensions that can be omitted when importing. Default: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.json'] // omit these extensions
  }
});

Avoid omitting custom types like .vue to keep IDE and type support functional.

optimizeDeps.force

Force Vite to pre‑bundle dependencies even if they are already cached.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  optimizeDeps: {
    force: true // force dependency pre‑bundling
  }
});

Alternatively, delete the .vite folder or run npx vite --force .

server.host

Specify the IP address the dev server listens on. Set to true or 0.0.0.0 to allow access from mobile devices on the same network.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  server: {
    host: true // listen on all addresses
  }
});

server.proxy

Configure reverse proxies for API calls and websockets.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  server: {
    proxy: {
      '/foo': 'http://localhost:4567', // simple string rewrite
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      },
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/fallback/, '')
      },
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
});

base

Base public path for development or production. Can be an absolute path, full URL, or empty string.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  base: '/foo/' // public base path
});

build.outDir

Output directory for built files; default is dist .

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    outDir: 'build' // custom output directory
  }
});

build.assetsDir

Directory for static assets; default is assets .

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    assetsDir: 'static' // custom assets directory
  }
});

build.assetsInlineLimit

Threshold for inlining images as base64; default is 4096 bytes.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    assetsInlineLimit: 4096 // inline limit in bytes
  }
});

plugins

Use official or community plugins, e.g., @vitejs/plugin-vue for Vue 3 support and vite-plugin-mock for mock data.

npm i mockjs -S
npm i vite-plugin-mock -D

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe()
  ]
});

Full Configuration Example

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';
export default defineConfig({
  base: '/foo/',
  optimizeDeps: { force: true },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '/src/assets/styles/variables.scss';`
      }
    },
    postcss: {
      plugins: [
        // viewport layout adaptation
        postcssPxToViewport({ viewportWidth: 375 })
      ]
    }
  },
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
    extensions: ['.js', '.ts', '.json']
  },
  server: {
    host: true,
    proxy: {
      '/foo': 'http://localhost:4567',
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      },
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/fallback/, '')
      },
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  },
  build: {
    outDir: 'build',
    assetsDir: 'static',
    assetsInlineLimit: 4096
  },
  plugins: [
    vue(),
    viteMockServe()
  ]
});

Conclusion

Mastering these common Vite configurations covers most daily development needs; for special cases, refer to the documentation. Vite’s configuration is similar to Webpack but more streamlined, allowing developers to modify only a few settings to meet typical project requirements.