Vite 提供了一系列预置的默认配置，使得开发者无需复杂配置即可快速启动项目。以下是 Vite 的主要默认配置及其说明：

一、内置的配置

1、基础配置

• 根目录：默认为项目根目录（process.cwd()）。
• 入口文件：默认入口点为项目根目录下的 index.html。
• 构建输出目录：生产构建时默认输出到 dist 目录。

2、开发服务器（Development Server）

• 端口：默认使用 3000 端口。
• 自动打开浏览器：默认关闭，可通过 server.open: true 开启。
• CORS：默认启用 CORS，允许跨域请求。
• 热模块替换（HMR）：默认开启，修改代码后无需刷新页面即可更新。
• 代理：支持配置 server.proxy 解决跨域问题。

// vite.config.js
export default {
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
};

3、构建配置（Build）

• 代码分割：默认开启 Tree Shaking 和代码分割（基于 ES 模块）。
• 资源处理：
  • 资源文件（如图片）小于 4KB 时转为 Base64 内联。
  • 大于 4KB 的文件会复制到输出目录（如 dist/assets）。
• 压缩工具：使用 terser 进行 JS/CSS 压缩。
• 目标浏览器：默认支持现代浏览器（支持原生 ESM 的浏览器）。

export default {
  build: {
    outDir: "dist",
    assetsDir: "assets",
    minify: "terser", // 或 'esbuild'
    target: "es2015",
  },
};

4、静态资源处理

• 支持的格式：自动识别并处理以下文件类型：
  • 图片：.png, .jpg, .jpeg, .gif, .svg 等。
  • 字体：.woff, .woff2, .eot, .ttf, .otf。
  • 其他：.json, .wasm。
• 路径别名：默认支持 @ 指向 src 目录（需在 jsconfig.json/tsconfig.json 配置）。
• 公共目录：public 目录下的文件会直接复制到构建输出目录。

5、CSS 处理

• CSS Modules：支持以 .module.css 后缀启用 CSS 模块化。
• 预处理器：内置支持 SCSS、Sass、Less、Stylus（需安装对应预处理器）。
• PostCSS：默认读取项目根目录的 postcss.config.js 配置（如自动添加浏览器前缀）。

export default {
  css: {
    modules: {
      localsConvention: "camelCase", // CSS Modules 类名转为驼峰
    },
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/vars.scss";`, // 全局 SCSS 变量
      },
    },
  },
};

6、插件（Plugins）

• 框架插件：根据项目类型自动启用对应插件：
  • Vue：@vitejs/plugin-vue
  • React：@vitejs/plugin-react
• 其他内置插件：支持 TypeScript、环境变量、CSS 拆分等。

7、环境变量

• 加载 .env 文件：默认加载 .env, .env.local, .env.[mode] 等文件。
• 客户端暴露变量：以 VITE_ 开头的变量会被注入到客户端代码中。

# .env
VITE_API_URL = 'https://api.example.com'

8、TypeScript 支持

• 默认支持：无需配置即可直接使用 .ts 和 .tsx 文件。
• 类型检查：需通过 tsc --noEmit 或 IDE 插件进行类型检查。

9、优化与预构建

• 依赖预构建：将 CommonJS 依赖转为 ESM，并缓存到 node_modules/.vite。
• 按需编译：开发时按需编译 node_modules 中的依赖。

10、配置文件

• 默认配置文件：vite.config.js 或 vite.config.ts。
• 配置语法：支持 ES 模块和 TypeScript。

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  // 覆盖或扩展默认配置
});

覆盖默认配置

通过创建 vite.config.js 文件并导出修改后的配置，可以覆盖任何默认设置。例如：

// 修改端口和构建输出目录
export default {
  server: {
    port: 8080,
  },
  build: {
    outDir: "build",
  },
};

Vite 的默认配置平衡了开箱即用和灵活性，开发者只需在需要时进行覆盖即可满足大多数场景需求。特定插件时，才需要额外配置。对于大多数现代前端项目，Vite 的默认配置已经足够高效和强大。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24