vite.config.js 配置详解

vite.config.js 是 Vite 项目的核心配置文件，借助它能够对 Vite 构建工具的各项行为进行定制。

一、基础配置结构

运用 defineConfig 函数可获取更优质的类型提示与智能补全，让配置编写更为便捷。

import { defineConfig } from "vite";
export default defineConfig({
  // 具体配置项
});

二、常见配置项

1. 项目路径相关

1.1 root

指定项目的根目录，Vite 会从此目录开始查找入口文件和静态资源。

export default defineConfig({
  root: "./src",
});

1.2 base

设定项目的基础路径，也就是打包后资源的公共路径。若项目部署在子路径下，需设置该值。

export default defineConfig({
  base: "/my-project/",
});

2. 模式与环境

2.1 mode

指定项目的模式，常见的有 development（开发模式）和 production（生产模式）。Vite 会依据不同模式加载不同的环境变量。

export default defineConfig({
  mode: "development",
});

2.2 envDir

指定环境变量文件所在的目录，默认是项目根目录。

export default defineConfig({
  envDir: "./env",
});

3. 开发服务器配置（server）

3.1 port

指定开发服务器的端口号。

export default defineConfig({
  server: {
    port: 3001,
  },
});

3.2 host

指定开发服务器监听的主机地址，设为 true 可监听所有地址。

export default defineConfig({
  server: {
    host: true,
  },
});

3.3 open

在服务器启动时自动打开浏览器。可以是布尔值，也可以指定打开的路径。

export default defineConfig({
  server: {
    open: true,
  },
});

3.4 proxy

配置开发服务器的代理规则，常用于解决跨域问题。

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://api.example.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

3.5 strictPort

用于控制开发服务器端口使用的严格程度。为 true 时，端口被占用，启动失败，并抛出错误。为 false 时，端口被占用，Vite 会自动尝试使用下一个可用的端口来启动开发服务器。

import { defineConfig } from "vite";
export default defineConfig({
  server: {
    port: 3000, // 指定端口号
    strictPort: true, // 设置为 true，若端口被占用则启动失败
  },
});

4. 构建配置（build）

4.1 outDir

指定打包输出的目录，默认是 dist。

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

4.2 assetsDir

指定打包后静态资源存放的目录。

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

4.3 minify

指定是否对代码进行压缩，可取值 'terser'（使用 Terser 压缩）、'esbuild'（使用 esbuild 压缩）或 false（不压缩）。

export default defineConfig({
  build: {
    minify: "esbuild",
  },
});

5. 插件配置（plugins）

用于扩展 Vite 的功能，可添加各种插件。

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

6. 解析配置（resolve）

6.1 alias

设置路径别名，方便在代码中引用模块。

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

7. CSS 配置（css）

7.1 preprocessorOptions

配置 CSS 预处理器的选项，如 Sass、Less 等。配置 Sass 全局变量

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