在 Vite 中更改输入和输出目录

问题描述

当使用 Vite 构建静态多页面网站时，默认的项目结构如下：

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

但很多开发者希望能将源文件组织在 src/ 目录中，而构建输出到项目根目录下的 dist/ 文件夹：

my-app/
├─ node_modules/
├─ package.json
├─ src/
│  ├─ about.html
│  ├─ index.html
│  ├─ main.js
│  ├─ style.scss
├─ dist/
│  ├─ assets/
│  ├─ about.html
│  ├─ index.html

直接修改 package.json 中的脚本为：

{
  "scripts": {
    "dev": "vite src",
    "build": "vite build src",
    "serve": "vite preview"
  }
}

会导致开发服务器能正常工作，但构建时会在 src/ 文件夹内创建 dist/ 目录，并且无法正确处理多个 HTML 文件。

解决方案

基础配置：更改根目录和输出目录

创建或修改 vite.config.js 文件（位于项目根目录）：

import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true // 构建前清空输出目录
  }
})

重要提示

• root 指定源代码目录
• build.outDir 指定相对于当前工作目录的输出目录
• emptyOutDir: true 确保每次构建前清理输出目录

处理多页面应用

对于多页面应用，需要明确指定每个 HTML 文件的入口：

手动指定入口

import path from 'path'

export default {
  root: path.resolve(__dirname, 'src'),
  build: {
    outDir: path.resolve(__dirname, 'dist'),
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'src/index.html'),
        about: path.resolve(__dirname, 'src/about.html')
      }
    }
  }
}

自动扫描入口

import path from 'path'
import glob from 'glob'

export default {
  root: path.join(__dirname, 'src'),
  build: {
    outDir: path.join(__dirname, 'dist'),
    rollupOptions: {
      input: glob.sync(path.resolve(__dirname, 'src', '*.html'))
    }
  }
}

注意事项

使用自动扫描需要安装 glob 依赖：

npm install glob -D

完整配置文件示例

下面是使用 TypeScript 的完整示例：

import { defineConfig } from 'vite'

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist',
    emptyOutDir: true
  }
})

配置文件位置自定义

如果你的 Vite 配置文件不在项目根目录，可以在 package.json 中指定：

{
  "scripts": {
    "dev": "vite --config ./config/vite.config.js",
    "build": "vite build --config ./config/vite.config.js",
    "preview": "vite preview --config ./config/vite.config.js"
  }
}

常见问题解决

构建后文件路径问题

如果构建后资源路径不正确，可以添加 base 配置项：

export default defineConfig({
  base: './', // 使用相对路径
  root: 'src',
  build: {
    outDir: '../dist'
  }
})

目录结构示例

配置成功后，目录结构应该如下：

my-app/
├─ node_modules/
├─ src/
│  ├─ index.html
│  ├─ about.html
│  ├─ main.js
│  ├─ style.css
│  └─ vite.config.js
├─ dist/
│  ├─ assets/
│  ├─ index.html
│  └─ about.html
└─ package.json

总结

通过正确配置 vite.config.js 文件中的 root 和 build.outDir 选项，可以轻松实现将源代码组织在 src/ 目录中，同时将构建输出到项目根目录下的 dist/ 文件夹。对于多页面应用，需要使用 rollupOptions.input 明确指定每个 HTML 文件的入口路径。