Vite构建多输出文件夹及自定义各文件夹页面标题方法咨询

现有项目结构：

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

需要构建为以下目录结构，同时给one/index.html和two/index.html设置不同页面标题：

my-app/
├─ package.json
├─ src/
│  ├─ index.html
│  ├─ main.js
│  ├─ style.scss
├─ dist/
│  ├─ assets/
│  │  ├─ main.[hash].js
│  │  ├─ style.[hash].css
│  ├─ one/
│  │  ├─ index.html
│  ├─ two/
│  │  ├─ index.html

原Vite配置会导致资源文件重复生成在one和two目录中，需修正配置。

原配置代码：

export default defineConfig({
  base: '',
  root: './src',
  build: {
    outDir: '../build',
    rollupOptions: {
      input: 'src/index.html',
      output: [
        {
          name: 'one',
          dir: path.join(__dirname, 'build/one'),
        },
        {
          name: 'two',
          dir: path.join(__dirname, 'build/two'),
        },
      ],
    },
  },

  plugins: [ViteEjsPlugin()],
});

1. 修正Vite配置（统一资源输出） #

核心是通过多入口配置指定HTML输出路径，同时强制所有资源统一输出到dist/assets目录，避免重复生成。修改后的vite.config.js如下：

import { defineConfig } from 'vite';
import ViteEjsPlugin from 'vite-plugin-ejs';
import path from 'path';

export default defineConfig({
  base: '', // 保持相对路径适配部署
  root: './src',
  build: {
    outDir: '../dist', // 输出目录匹配需求的dist
    assetsDir: 'assets', // 统一指定资源输出目录
    rollupOptions: {
      input: {
        // 用key定义HTML输出路径，value指向源HTML文件
        'one/index': path.resolve(__dirname, 'src/index.html'),
        'two/index': path.resolve(__dirname, 'src/index.html'),
      },
      output: {
        // 强制所有资源文件输出到assets目录
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash][extname]',
      },
    },
  },
  plugins: [
    ViteEjsPlugin((context) => {
      // 根据入口路径判断当前页面，注入对应标题
      const pageTitle = context.entryName.includes('one') ? '页面One' : '页面Two';
      return { pageTitle };
    })
  ]
});

2. 修改HTML模板（注入动态标题） #

在src/index.html中使用EJS语法接收标题变量：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 动态渲染页面标题 -->
  <title><%= pageTitle %></title>
  <link rel="stylesheet" href="./style.scss">
</head>
<body>
  <script type="module" src="./main.js"></script>
</body>
</html>

3. 验证构建结果 #

执行npm run build后，会生成符合需求的目录结构：

• dist/assets下存放编译后的main.js和style.css（SCSS自动编译为CSS）
• dist/one/index.html标题为「页面One」，dist/two/index.html标题为「页面Two」
• 资源文件仅生成一份，不会在one和two目录重复出现

原配置问题说明 #

原配置通过output数组定义了两个独立输出目录，Rollup会分别将资源打包到每个目录下，导致重复生成。改为单输出目录+多入口配置后，资源统一输出到assets，HTML按指定路径生成，完美解决问题。

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