Vite 中如何配置构建输出路径？

推荐答案

在 Vite 中配置构建输出路径可以通过修改 vite.config.js 文件中的 build.outDir 选项来实现。以下是一个示例配置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist', // 默认值为 'dist'
  },
});

在这个示例中，构建输出路径被设置为 dist 目录。你可以根据需要将其更改为其他路径。

本题详细解读

1. build.outDir 选项

build.outDir 是 Vite 配置中的一个选项，用于指定构建输出的目录。默认情况下，Vite 会将构建结果输出到项目根目录下的 dist 文件夹中。你可以通过修改 outDir 的值来更改输出路径。

2. 配置示例

以下是一个完整的 vite.config.js 文件示例，展示了如何配置构建输出路径：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'build', // 将构建输出路径更改为 'build' 目录
  },
});

在这个示例中，构建输出路径被设置为 build 目录。你可以根据需要将其更改为其他路径，例如 output 或 public。

3. 注意事项

• 路径解析：outDir 的路径是相对于项目根目录的。如果你希望输出到项目根目录之外的路径，可以使用绝对路径。
• 环境变量：在某些情况下，你可能希望根据不同的环境（如开发环境或生产环境）动态设置输出路径。可以通过环境变量来实现这一点。

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: process.env.NODE_ENV === 'production' ? 'dist' : 'build',
  },
});

在这个示例中，生产环境的构建输出路径为 dist，而其他环境的构建输出路径为 build。

4. 其他相关配置

除了 outDir，Vite 还提供了其他与构建输出相关的配置选项，例如 build.assetsDir（用于指定静态资源的输出目录）和 build.emptyOutDir（用于控制是否在构建前清空输出目录）。你可以根据项目需求进一步调整这些配置。