Vite项目打包后dist出现src文件夹，如何让index.html在dist根目录？

方法一：调整Rollup输出配置 #

在vite.config.js的build.rollupOptions中添加output配置，明确指定各类文件的输出路径，确保index.html直接输出到dist根目录：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'src/index.html'),
      },
      output: {
        // 将入口HTML文件输出到dist根目录
        entryFileNames: `index.html`,
        // JS chunk文件输出到dist/js目录
        chunkFileNames: `js/[name].[hash].js`,
        // 静态资源（CSS、图片等）输出到dist/assets目录
        assetFileNames: `assets/[name].[hash][extname]`
      }
    }
  }
})

若将input的键名改为index，使用entryFileNames: '[name].html'也能达到相同效果

方法二：设置Vite项目根目录为src #

把Vite的项目根目录指定为src，同时配置打包输出目录为上级目录的dist，这样打包时会直接以src作为根目录处理文件，输出的index.html自然位于dist根目录：

import { defineConfig } from 'vite'
import path from 'path'

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

这种方式更适配源码全在src目录的项目结构，后续新增文件无需额外调整路径配置

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