Vite多页面应用中如何控制HTML文件的输出路径？

可以通过配置build.rollupOptions实现将HTML文件输出到dist根目录，无需修改root路径（避免导入资源路径错误），具体步骤如下：

1. 配置Vite入口文件路径 #

在vite.config.ts中，通过build.rollupOptions.input以键值对形式指定所有HTML入口：键为输出到dist根目录的文件名（如index、about），值为对应HTML文件的实际路径。这样Rollup会直接将文件输出到dist根目录，而非保留原目录结构。

示例配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'src/views/index.html'),
        about: resolve(__dirname, 'src/views/about.html'),
        // 按需添加其他页面
      },
      output: {
        // 可选：统一静态资源（JS/CSS/图片等）的输出目录，保持dist结构整洁
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
        entryFileNames: 'assets/[name]-[hash].js',
      },
    },
  },
});

2. 确保HTML中的资源导入路径正确 #

保持项目root为默认值（即vite.config.ts所在目录），HTML文件中导入src/index.tsx的路径需使用项目根相对路径，示例：

<script type="module" src="/src/index.tsx"></script>

这样Vite会正确解析到项目根目录下的src/index.tsx，避免出现404错误。

为什么修改root会导致404？ #

当你将root设为src/views时，Vite会将该目录作为项目根目录，此时HTML中/src/index.tsx的请求路径会指向src/views/src/index.tsx——这个路径不存在，因此运行时会出现404错误。保持默认root是更稳妥的选择。

内容的提问来源于stack exchange，提问作者silvenon