Skip to content

共享配置

base

  • 类型:string
  • 默认: /

开发或生产环境服务的公共基础路径。合法的值包括以下几种:

  • 绝对 URL 路径名,例如 /foo/
  • 完整的 URL,例如 https://bar.com/foo/(域名部分在开发环境中不会被使用,因此该值与 /foo/ 相同)
  • 空字符串或 ./(用于嵌入形式的开发)

define

定义全局常量替换方式。其中每项在开发环境下会被定义在全局,而在构建时被静态替换。

js
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('v1.0.0'),
    __API_URL__: 'window.__backend_api_url',
  },
})

提示

对于使用 TypeScript 的开发者来说,请确保在 env.d.tsvite-env.d.ts 文件中添加类型声明,以获得类型检查以及代码提示:

ts
// vite-env.d.ts
declare const __APP_VERSION__: string

publicDir

  • 类型:string | false
  • 默认:"public"

作为静态资源服务的文件夹。

plugins

需要用到的插件数组。该目录中的文件在开发期间在 / 处提供,并在构建期间复制到 build.outDir 的根目录,并且始终按原样提供或复制而无需进行转换。

Falsy 虚值的插件将被忽略,插件数组将被扁平化(flatten)。

resolve

resolve.alias

传递到 @rollup/plugin-aliasentries 选项

js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
    },
  },
})
js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: [
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
      { find: 'utils', replacement: fileURLToPath(new URL('./src/utils', import.meta.url)) },
    ],
  },
})

注意

避免使用 ~ 作为别名,特别是在路径解析相关的场景中。

css

preprocessorOptions

指定传递给 CSS 预处理器的选项。

sass 配置

  • 选择要使用的 sass 应用程序接口 api: "modern-compiler" | "modern" | "legacy" (如果安装了 sass-embedded,默认为 "modern-compiler",否则为 "modern"). 为获得最佳性能,建议使用 api: "modern-compiler"sass-embedded 软件包。
  • "legacy" API 已过时,将在 Vite 7 中移除。
js
export default defineConfig({
  // ...
  scss: {
    // 若安装了 sass-embedded(推荐),默认是 "modern-compiler"
    api: 'modern-compiler', // "modern" | "modern-compiler" | "legacy"
  },
})
详细说明
bash
npm i -D sass sass-embedded

less 配置

js
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      less: {
        math: 'always', // 强制允许计算表达式
        javascriptEnabled: true, // 允许在 Less 中执行 JavaScript 表达式
      },
    },
  },
})

lightningcss

该选项用于配置 Lightning CSS

基于 MIT 许可发布