如何配置Vite，使原生JS多页面静态网站打包后保留目录结构

你的原生JS静态站目录结构如下：

my_page/
├─ admin/
│  ├─ dashboard.html
├─ js/
│  ├─ dashboard.js
├─ about.html
├─ index.html
├─ vite.config.js

要让Vite构建后的dist目录完全保留上述结构，只需在vite.config.js中指定所有HTML入口文件即可，具体配置如下：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      // 明确指定所有HTML入口，Vite会按原路径结构生成文件
      input: {
        main: './index.html',
        about: './about.html',
        adminDashboard: './admin/dashboard.html'
      }
    }
  }
});

配置说明 #

• rollupOptions.input用于定义Rollup的入口文件，这里把所有HTML文件都作为入口传入
• Vite会根据每个入口文件的相对路径，在dist目录中生成对应的结构：比如./admin/dashboard.html会被编译到dist/admin/dashboard.html
• 原js/目录下的文件会被Vite按依赖关系处理，打包后的资源路径会自动对应到正确的引用位置

验证方法 #

执行npm run build命令后，查看生成的dist目录，结构应该和原项目完全一致，直接部署到静态服务器即可正常访问。

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