开箱即用，快速高效——Vite 2配置说明

前端

2023-12-11 18:12:54

Vite 配置文件简介

Vite 的配置文件位于项目根目录的 vite.config.js 文件中。该文件是 JavaScript 模块，允许您自定义 Vite 的构建行为。配置文件包含了各种配置选项，您可以根据项目需求进行调整。

常用配置参数详解

1. mode

mode 参数用于指定构建模式，共有三种可选值：

development：开发模式，提供快速迭代和实时热更新。
production：生产模式，生成经过优化和压缩的代码，适合部署到线上环境。
test：测试模式，提供针对测试环境的特殊配置。

2. root

root 参数指定项目根目录的路径，默认为当前工作目录。如果您的项目结构复杂或需要在不同目录下构建，可以使用该参数指定项目根目录。

3. base

base 参数指定打包后的代码在服务器上的根路径，默认为 /。如果您的项目需要部署到子路径下，可以使用该参数指定子路径。

4. publicDir

publicDir 参数指定公共目录的路径，默认为 public。公共目录中的文件不会被 Vite 处理，而是直接复制到构建输出目录中。您可以将静态资源（如 HTML、CSS、图片等）放在公共目录中。

5. build

build 参数用于指定构建相关的配置选项，包括：

outDir：指定构建输出目录的路径，默认为 dist。
assetsDir：指定静态资源输出目录的路径，默认为 assets。
assetsInlineLimit：指定内联静态资源的最大字节数，默认为 4096 字节。超过该限制的静态资源将被单独打包。
chunkSizeLimit：指定代码块的最大字节数，默认为 20000 字节。超过该限制的代码块将被拆分成多个更小的块。
rollupOptions：指定 Rollup 的构建选项，可以进一步自定义构建行为。

6. devServer

devServer 参数用于指定开发服务器的配置选项，包括：

host：指定开发服务器的监听主机，默认为 localhost。
port：指定开发服务器的监听端口，默认为 3000。
https：指定是否使用 HTTPS 协议，默认为 false。
open：指定是否在开发服务器启动时自动打开浏览器，默认为 true。

配置示例

以下是一个简单的 Vite 配置文件示例：

export default {
  mode: 'development',
  root: 'src',
  base: '/my-app/',
  publicDir: 'public',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    chunkSizeLimit: 20000,
    rollupOptions: {
      input: 'src/main.js',
      output: {
        format: 'iife',
        file: 'dist/main.js'
      }
    }
  },
  devServer: {
    host: 'localhost',
    port: 3000,
    https: false,
    open: true
  }
};