博客站

Vite 的配置文件是 vite.config.js（或 vite.config.ts，如果使用 TypeScript），用于自定义项目的构建和开发行为。配置文件位于项目根目录下，Vite 会自动读取并应用其中的配置。

配置文件的基本结构

以下是一个基本的 vite.config.js 文件示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果使用 Vue

export default defineConfig({
  // 配置选项
  plugins: [vue()], // 如果使用 Vue
  server: {
    port: 3000, // 开发服务器端口
    open: true, // 启动时自动打开浏览器
  },
  build: {
    outDir: 'dist', // 生产构建输出目录
    assetsDir: 'assets', // 静态资源目录
  },
});

常用配置选项

以下是一些常用的配置选项及其说明：

1. plugins

• 类型：(Plugin | Plugin[])[]
• 说明：配置使用的插件。例如，Vue 项目需要使用 @vitejs/plugin-vue 插件。
• 示例：

  import vue from '@vitejs/plugin-vue';
  export default defineConfig({
    plugins: [vue()],
  });
  

2. server

• 类型：object
• 说明：配置开发服务器行为。
• 常用选项：
  • port：开发服务器端口，默认为 5173。
  • open：启动时自动打开浏览器，默认为 false。
  • proxy：配置代理服务器。
• 示例：

  export default defineConfig({
    server: {
      port: 3000,
      open: true,
      proxy: {
        '/api': 'http://localhost:5000',
      },
    },
  });
  

3. build

• 类型：object
• 说明：配置生产构建行为。
• 常用选项：
  • outDir：生产构建输出目录，默认为 dist。
  • assetsDir：静态资源目录，默认为 assets。
  • minify：是否压缩代码，默认为 true。
  • sourcemap：是否生成 sourcemap，默认为 false。
• 示例：

  export default defineConfig({
    build: {
      outDir: 'build',
      assetsDir: 'static',
      minify: 'terser',
      sourcemap: true,
    },
  });
  

4. resolve

• 类型：object
• 说明：配置模块解析行为。
• 常用选项：
  • alias：配置路径别名。
• 示例：

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

5. css

• 类型：object
• 说明：配置 CSS 行为。
• 常用选项：
  • preprocessorOptions：配置 CSS 预处理器选项。
• 示例：

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

6. optimizeDeps

• 类型：object
• 说明：配置依赖优化行为。
• 常用选项：
  • include：强制预构建的依赖项。
• 示例：

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

示例：完整的 vite.config.js 文件

以下是一个完整的 vite.config.js 文件示例，包含常用配置选项：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:5000',
    },
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser',
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
  optimizeDeps: {
    include: ['lodash-es'],
  },
});

总结

Vite 的配置文件 vite.config.js 提供了丰富的配置选项，允许开发者自定义项目的构建和开发行为。通过合理配置，可以优化开发体验和构建性能，满足不同项目的需求。