In the field of front-end development, Vite has become the preferred build tool for many developers due to its fast cold start, efficient Hot Module Replacement (HMR), and other features. The vite.config.js file, as the core configuration file of Vite, empowers developers to customize various aspects of project development and building. A deep understanding of its configuration items enables developers to adjust flexibly according to project requirements, enhancing development efficiency and project performance. Let’s now analyze the usage of common configuration items in vite.config.js one by one.

1. Basic Configuration: defineConfig and Core Plugins

defineConfig serves as the entry function for Vite configuration, used to encapsulate the entire configuration object. In the configuration file, you first need to import defineConfig and use it to define the basic configuration of the project.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ]
});

Among them, the plugins configuration item is crucial for introducing various Vite plugins. For example, in a Vue project, the @vitejs/plugin-vue plugin enables Vite to support the parsing and processing of .vue single – file components, including template compilation, style extraction, and other functions. Besides the Vue plugin, there are many other plugins like @vitejs/plugin-react for React support. Developers can choose appropriate plugins according to the project’s technology stack.

2. Path Resolution: resolve Configuration

The resolve configuration item mainly deals with module resolution – related functions, and the most commonly used is the alias configuration. By setting aliases, you can simplify module import paths, improving code readability and maintainability.

import { defineConfig, URL } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': URL.fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

In the above code, @ is set as an alias for the project’s src directory. In the code, you can import modules using the form import { component } from ‘@/components’ instead of relative paths. This is especially useful in large – scale projects, effectively avoiding the confusion of path levels. Additionally, the extensions property can be configured to automatically complete file extensions, reducing the amount of input when importing modules.

3. Development Server: server Configuration

The server configuration item defines the behavior of the development server. Properly configuring server can optimize the development experience during local development.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

• port: Specifies the port number on which the development server starts. The default is 5173, and developers can modify it according to their needs.
• open: When set to true, the browser will automatically open to access the development address after the project starts.
• proxy: Used to configure the proxy server in the development environment. When the project needs to interact with the backend API, the proxy can solve cross – origin issues. In the above code, requests starting with /api are proxied to https://api.example.com, and the /api part in the request path is removed.

4. Building Configuration: build Configuration

The build configuration item is mainly used for settings related to project building, including the output directory, resource processing, code optimization, etc.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
});

• outDir: Specifies the output directory after the project is built. The default is dist, which can be modified as needed.
• assetsDir: Sets the storage directory for static resources after building.
• sourcemap: Controls whether to generate sourcemap files. true means generating them, which is convenient for debugging; false means not generating them. In a production environment, it is usually set to false to reduce file size.
• rollupOptions: Through rollupOptions, you can perform more granular configuration of the underlying Rollup build. The manualChunks configuration in the above code realizes the 分包 (chunking) of dependencies in node_modules, improving code loading performance.

5. Other Common Configurations

5.1 Optimization Configuration: optimizeDeps

The optimizeDeps configuration item controls the pre – building process of Vite’s dependencies. During development, Vite automatically pre – builds dependencies to improve performance, but sometimes manual configuration is required.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ],
  optimizeDeps: {
    include: ['lodash-es']
  }
});

The include property can specify modules that need to be pre – built. Adding some frequently used modules that are not automatically pre – built can enhance the development experience.

5.2 Style Configuration: css

The css configuration item is used to handle style – related settings, such as preprocessor configuration and PostCSS configuration.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});

The above code sets a globally imported variable file for the SCSS preprocessor through preprocessorOptions. In all .scss files in the project, these variables can be used directly without repeated imports.

By understanding these configuration items of vite.config.js, developers can customize Vite flexibly according to actual project requirements. Whether it is optimizing the development experience or improving the performance of the built project, they can handle it with ease. As projects continue to evolve and technologies update, there are still many advanced configurations of Vite waiting to be explored, allowing developers to fully unleash its powerful capabilities.