博客站

在 Vite 中，生产构建的配置通过 vite.config.js（或 vite.config.ts）文件中的 build 选项进行。以下是一些常用的生产构建配置选项及其说明：

1. outDir

• 类型：string
• 说明：指定生产构建的输出目录。
• 默认值：'dist'
• 示例：

  export default defineConfig({
    build: {
      outDir: 'build',
    },
  });
  

2. assetsDir

• 类型：string
• 说明：指定静态资源（如图片、字体等）的输出目录。
• 默认值：'assets'
• 示例：

  export default defineConfig({
    build: {
      assetsDir: 'static',
    },
  });
  

3. assetsInlineLimit

• 类型：number
• 说明：指定小于该大小的静态资源会被内联为 base64 编码的 Data URL。设置为 0 时禁用内联。
• 默认值：4096（4KB）
• 示例：

  export default defineConfig({
    build: {
      assetsInlineLimit: 8192, // 8KB
    },
  });
  

4. cssCodeSplit

• 类型：boolean
• 说明：是否启用 CSS 代码分割。禁用时，所有 CSS 会被打包到一个文件中。
• 默认值：true
• 示例：

  export default defineConfig({
    build: {
      cssCodeSplit: false,
    },
  });
  

5. sourcemap

• 类型：boolean | 'inline' | 'hidden'
• 说明：是否生成 sourcemap 文件。'inline' 表示将 sourcemap 内联到输出文件中，'hidden' 表示生成 sourcemap 但不包含引用。
• 默认值：false
• 示例：

  export default defineConfig({
    build: {
      sourcemap: true,
    },
  });
  

6. minify

• 类型：boolean | 'terser' | 'esbuild'
• 说明：是否压缩代码。'terser' 使用 Terser 进行压缩，'esbuild' 使用 esbuild 进行压缩。
• 默认值：'esbuild'
• 示例：

  export default defineConfig({
    build: {
      minify: 'terser',
    },
  });
  

7. terserOptions

• 类型：object
• 说明：配置 Terser 压缩选项。
• 示例：

  export default defineConfig({
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true, // 移除 console.log
        },
      },
    },
  });
  

8. rollupOptions

• 类型：object
• 说明：配置 Rollup 打包选项。
• 常用选项：
  • input：指定入口文件。
  • output：配置输出选项，如 format、dir 等。
  • external：指定外部依赖。
• 示例：

  export default defineConfig({
    build: {
      rollupOptions: {
        input: 'src/main.js',
        output: {
          format: 'es',
          dir: 'dist',
        },
        external: ['lodash'],
      },
    },
  });
  

9. lib

• 类型：object
• 说明：配置库模式，用于构建库而非应用。
• 常用选项：
  • entry：指定库的入口文件。
  • name：指定库的全局变量名。
  • formats：指定输出的模块格式，如 'es'、'cjs'、'umd' 等。
• 示例：

  export default defineConfig({
    build: {
      lib: {
        entry: 'src/lib.js',
        name: 'MyLib',
        formats: ['es', 'cjs', 'umd'],
      },
    },
  });
  

10. emptyOutDir

• 类型：boolean
• 说明：是否在构建前清空输出目录。
• 默认值：true
• 示例：

  export default defineConfig({
    build: {
      emptyOutDir: false,
    },
  });
  

示例：完整的生产构建配置

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

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'build',
    assetsDir: 'static',
    assetsInlineLimit: 8192,
    cssCodeSplit: true,
    sourcemap: true,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
    rollupOptions: {
      input: 'src/main.js',
      output: {
        format: 'es',
        dir: 'dist',
      },
      external: ['lodash'],
    },
    lib: {
      entry: 'src/lib.js',
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
    },
    emptyOutDir: true,
  },
});

总结

通过 vite.config.js 文件中的 build 选项，可以灵活配置 Vite 的生产构建行为，包括输出目录、静态资源处理、代码压缩、sourcemap 生成、Rollup 配置等。合理配置生产构建可以优化输出文件，提升应用性能，并满足不同项目的需求。