普通共享配置选项

设置项目的基本选项，别名、根目录、插件....

root

设置项目根目录。index.html 所在位置，可以是绝对路径，也可以是相对于当前工作目录的路径

text

my-project/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── App.vue
└── vite.config.js

此时可以用root配置

export default defineConfig({
  root: 'public', // 将项目根目录设置为 'public' 文件夹
});

base

开发或生产环境服务的公共基础路径，当我们的应用并非部署在根目录下面，而是部署在某一个子路径或者子目录下面，这个时候就需要通过 base 保证你的静态资源能够正确被加载 - 绝对 URL 路径名，例如 /foo/ - 完整 URL，例如 https://bar.com/foo/（开发环境中不会使用 origin 部分，因此其值与 /foo/ 相同） - 空字符串或 ./（用于嵌入式部署）

export default defineConfig({
  base: '/my-app/', // 设置基本公共路径为 '/my-app/'
});

示例打包结果

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
    <link rel="stylesheet" href="/my-app/assets/style.67890.css">
  </head>
  <body>
    <script type="module" src="/my-app/assets/main.12345.js"></script>
  </body>
</html>

mode

: 当前的构建模式

define

定义全局常量替换。在开发过程中，这些条目将被定义为全局变量，被定义为全局变量后，意味着不需要通过 import 来导入，直接使用；在构建过程中会被静态替换。

注意：Vite 使用 esbuild 的 define 进行替换，因此值表达式必须是包含 JSON 可序列化的值（null、boolean、number、string、array、object）的字符串或单个标识符。对于非字符串值，Vite 会自动将其转换为 JSON 字符串。

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

plugins

需要用到的插件数组

publicDir

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

cacheDir

缓存文件夹

resolve:

alias: 实现路径别名
- 将会被传递到 @rollup/plugin-alias 作为 entries 的选项
dedupe: 去重,如果你在你的应用程序中有相同依赖的副本（比如 monorepos），请使用此选项强制 Vite 始终将列出的依赖项解析为同一副本（从项目根目录）
- 避免重复的依赖版本
- 优化构建产物\
conditions: 解决程序包中情景导出时的其他允许条件
mainFields: package.json 中，在解析包的入口点时尝试的字段列表
extensions: 导入时想要省略的扩展名列表
- 默认值： ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
- 自定义扩展名的顺序，从而调整匹配优先级
- 不推荐对自定义导入类型（如 .vue）省略扩展名，因为这可能会干扰 IDE 和类型支持
preserveSymlinks: 保留符号链接

export default defineConfig({
  resolve: {
    alias: {
      // 将 '@' 指向 'src' 目录, 之后在代码中就可以通过别名来指定目录
      '@': path.resolve(__dirname, 'src'), 
      // 将 '@components' 指向 'src/components' 目录
      '@components': path.resolve(__dirname, 'src/components'), 
      // 将 '@utils' 指向 'src/utils' 目录
      '@utils': path.resolve(__dirname, 'src/utils'), 
    },
  },
});

css

modules: 配置 CSS modules 的行为
- 选项将被传递给 postcss-modules
postcss: 内联的 PostCSS 配置
- 期望接收与 postcss.config.js 一致的格式, ，或者一个（默认基于项目根目录的）自定义的 PostCSS 配置路径
- 对于 plugins 属性有些特别，只接收使用数组格式
- 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
preprocessorOptions: 指定传递给 CSS 预处理器的选项
devSourcemap：在开发过程中是否启用 sourcemap

export default defineConfig({
  css: {
    postcss: {
      // 在这里配置 postcss 相关信息，例如用哪个插件....
      plugins: [
        autoprefixer(),
        cssnano()
      ],
      preprocessorOptions: {
        scss: {
          // 相当于给所有的 Scss 文件的头部都添加了这个引用，自动导入 mixins.scss 混合器文件
          additionalData: `@import "@/styles/mixins.scss";`
        }
      }
    },
    
  }
});

json

namedExports: 为 JSON 文件提供命名导出
stringify: 为 JSON 文件提供字符串化选项
- 若设置为 true，导入的 JSON 会被转换为 export default JSON.parse("...")，这样会比转译成对象字面量性能更好，尤其是当 JSON 文件较大的时候
- 开启此项，则会禁用按名导入

esbuild

esbuild 配置

设置为 false 来禁用 esbuild 转换

assetsInclude: 指定额外的 picomatch 模式作为静态资源处理

当从 HTML 引用它们或直接通过 fetch 或 XHR 请求它们时，它们将被插件转换管道排除在外

logLevel

调整控制台输出的级别，默认为 'info'

clearScreen

是否在重新加载时清除屏幕

envDir

用于解析 .env 文件的目录

envPrefix

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中, 默认VITE_

appType

指定应用类型 ’spa‘

普通共享配置选项 ​

root ​

base ​

mode ​

define ​

plugins ​

publicDir ​

cacheDir ​

resolve: ​

css ​

json ​

esbuild ​

assetsInclude: 指定额外的 picomatch 模式 作为静态资源处理 ​

logLevel ​

clearScreen ​

envDir ​

envPrefix ​

appType ​

普通共享配置选项

root

base

mode

define

plugins

publicDir

cacheDir

resolve:

css

json

esbuild

assetsInclude: 指定额外的 picomatch 模式作为静态资源处理

logLevel

clearScreen

envDir

envPrefix

appType