Vite 常见配置选项详细说明

Vite 常见配置选项详细说明

Vite 是一个快速的前端构建工具，旨在提供更快的冷启动和即时热模块替换（HMR）。本文将详细介绍 Vite 的常见配置选项，帮助你根据项目需求进行灵活配置。

基础路径 - base

base 配置项用于指定应用在生产环境中的路径前缀。例如，如果你的应用部署在服务器的 /subpath/ 路径下，那么你需要将 base 设置为 '/subpath/'。

export default defineConfig({
  base: '/',
});

构建选项 - build

build 选项用于配置 Vite 构建过程中的各种参数。

输出目录 - outDir

指定构建输出文件的目录，默认为 dist。

build: {
  outDir: 'dist',
}

存放静态资源的目录 - assetsDir

指定静态资源（如图片、字体等）的输出目录。

build: {
  assetsDir: 'assets',
}

静态资源内联限制 - assetsInlineLimit

小于此大小的静态资源会被内联为 base64 格式，默认为 4096 字节（4KB）。

build: {
  assetsInlineLimit: 4096,
}

CSS 代码拆分 - cssCodeSplit

启用或禁用 CSS 代码拆分，默认为 true。

build: {
  cssCodeSplit: true,
}

生成 sourcemap 文件 - sourcemap

是否生成 sourcemap 文件，默认为 false。

build: {
  sourcemap: false,
}

Rollup 相关配置 - rollupOptions

用于自定义 Rollup 打包选项。

build: {
  rollupOptions: {
    input: 'src/main.js',
    output: {
      // 可以配置输出选项
    },
  },
}

启用/禁用压缩 - minify

选择压缩工具 (esbuild 或 terser)，或者禁用压缩。

build: {
  minify: 'esbuild', // 'terser' 或者 false
}

触发警告的 chunk 大小限制 - chunkSizeWarningLimit

设置触发警告的 chunk 大小限制，单位为 KB。

build: {
  chunkSizeWarningLimit: 500,
}

构建前清空输出目录 - emptyOutDir

构建前是否清空输出目录，默认为 true。

build: {
  emptyOutDir: true,
}

生成 manifest 文件 - manifest

是否生成 manifest 文件，默认为 false。

build: {
  manifest: false,
}

生成 SSR manifest 文件 - ssrManifest

是否生成用于服务器端渲染（SSR）的 manifest 文件，默认为 false。

build: {
  ssrManifest: false,
}

构建目标 - target

设置构建目标，例如 esnext、modules 等。

build: {
  target: 'modules',
}

开发服务器配置 - server

server 选项用于配置开发服务器的各种参数。

服务器主机 - host

指定服务器的主机名，默认为 localhost。

server: {
  host: 'localhost',
}

服务器端口 - port

指定服务器的端口号，默认为 3000。

server: {
  port: 3000,
}

端口被占用时是否退出 - strictPort

如果端口被占用，是否退出服务器，默认为 false。

server: {
  strictPort: false,
}

启用 HTTPS - https

是否启用 HTTPS，默认为 false。

server: {
  https: false,
}

自动打开浏览器 - open

是否自动打开浏览器，默认为 false。

server: {
  open: true,
}

配置代理 - proxy

配置开发服务器的代理。

server: {