在 vite 项目中配置 `outdir` 需要修改 `vite.config.js` 文件，并在 `build` 选项中设置 `outdir` 属性为期望的目录路径。该配置会直接改变构建产物的输出位置，例如将默认的 `dist` 改为 `build` 或 `public/dist`。
Vite 配置文件中 outDir 的具体写法
在 `vite.config.js` 中，通过导出一个包含 `build` 属性的对象来指定输出目录。Vite 默认使用绝对路径解析，因此可以直接传入相对路径字符串，它会自动基于项目根目录进行拼接。
import { defineConfig } from 'vite';
export default defineConfig({
build: {
outDir: 'my-dist',
assetsDir: 'static'
}
});
上述代码将构建产物输出到项目根目录下的 `my-dist` 文件夹中。同时设置了 `assetsDir` 为 `static`，这意味着所有静态资源（如 JS、CSS、图片）都会放在 `my-dist/static/` 下，而不是默认的 `my-dist/assets/`。这种配置方式简单直接，适用于大多数需要将构建结果输出到非标准目录的场景。
outDir 与 assetsDir 的配合使用
单独配置 `outDir` 时，静态资源仍会存放在 `outDir/assets/` 子目录下。如果需要更精细地控制资源路径，可以结合 `assetsDir` 一起使用。这有助于优化 CDN 部署或满足特定的服务器目录结构要求。
// vite.config.js
export default {
build: {
outDir: 'dist',
assetsDir: 'assets' // 默认为 'assets'，可自定义
}
}
当 `assetsDir` 设置为 `assets` 时，最终的文件结构如下：`dist/index.html` 和 `dist/assets/main.js`。如果希望资源直接位于 `dist/` 根目录下，可以将 `assetsDir` 设置为空字符串 `''`，但需注意这可能导致文件名冲突或缓存问题。通常建议保持默认或明确指定一个子目录名。
不同输入条件下 outDir 的实际行为验证
当 `outDir` 指向一个已存在的目录且其中包含旧构建文件时，Vite 默认不会自动清理这些文件。这可能导致残留的旧资产干扰新版本的加载。可以通过启用 `cleanOnBuild` 选项来解决此问题，确保每次构建前清空输出目录。
export default {
build: {
outDir: 'dist',
emptyOutDir: true
}
};
设置 `emptyOutDir: true` 后，Vite 会在构建开始前删除 `outDir` 中的所有文件和文件夹。这是一个安全操作，因为 Vite 只会删除指定的输出目录，不会影响项目其他部分。建议在 CI/CD 流水线或频繁构建的开发环境中启用此选项，以保持输出目录的整洁和一致性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
