Vite纯JS项目多页面配置问题：子文件夹页面无法正确渲染

看起来你现在遇到的核心问题是：Vite默认只处理了根目录的index.html，没把pages子文件夹里的页面纳入多页面构建和服务的范围。之前参考的Stack Overflow方案没生效，大概率是因为没结合你的项目结构（已设置root: './app'）来正确配置多页面的入口和模板路径，我来给你一步步调整配置：

1. 先明确你的项目结构（基于描述） #

先对齐目录结构（方便对应配置路径）：

app/
├─ index.html          # 根页面
├─ assets/
│  └─ index.js         # 根页面的JS入口
├─ pages/
│  └─ language/
│     └─ index.html    # 子页面
│     └─ assets/       # 子页面的资源目录（如果有单独JS入口的话）
│        └─ language.js

2. 手动配置多页面（适合少量子页面） #

修改vite.config.ts中createHtmlPlugin的配置，把原来单页面的配置改成数组格式，为每个子页面添加独立的配置项：

// 保持原有导入，修改plugins中的createHtmlPlugin部分
plugins: [
    image(),
    htmlPurge(),
    createHtmlPlugin([
        // 根页面配置（保留你原来的设置）
        {
            entry: './assets/index.js',
            template: 'index.html',
            inject: {
                data: {
                    title: 'index',
                    injectScript: `<script>window.APP_VERSION = '${app.version}'</script><script src="./inject.js"></script>`,
                },
            },
            filename: 'index.html' // 指定输出文件名，确保路径对应
        },
        // Language子页面配置
        {
            // 子页面的JS入口路径（如果有单独的JS就写，没有可留空）
            entry: './pages/language/assets/language.js',
            // 子页面的模板HTML路径（相对于app目录）
            template: './pages/language/index.html',
            inject: {
                data: {
                    title: 'Language Page',
                    // 可根据子页面需求自定义注入内容
                    injectScript: `<script>window.APP_VERSION = '${app.version}'</script>`,
                },
            },
            // 指定输出的文件路径，确保访问URL能匹配
            filename: 'pages/language/index.html'
        }
    ]),
],

3. 动态生成多页面配置（适合大量子页面） #

如果你的pages文件夹下有很多子页面，不想手动一个个添加配置，可以用动态遍历目录的方式自动生成配置：

// 顶部先导入fs和path模块
import fs from 'fs';
import path from 'path';

// 编写动态生成多页面配置的函数
function generateMultiPageConfigs() {
    const pageConfigs = [];
    const appRoot = path.resolve(__dirname, 'app');

    // 先添加根页面的配置
    pageConfigs.push({
        entry: './assets/index.js',
        template: 'index.html',
        inject: {
            data: {
                title: 'index',
                injectScript: `<script>window.APP_VERSION = '${app.version}'</script><script src="./inject.js"></script>`,
            },
        },
        filename: 'index.html'
    });

    // 遍历pages下的所有子文件夹
    const pagesDir = path.join(appRoot, 'pages');
    if (fs.existsSync(pagesDir)) {
        const pageFolders = fs.readdirSync(pagesDir, { withFileTypes: true }).filter(dir => dir.isDirectory());
        
        pageFolders.forEach(folder => {
            const pageName = folder.name;
            const pageHtmlPath = `./pages/${pageName}/index.html`;
            const pageEntryPath = `./pages/${pageName}/assets/index.js`;

            // 检查当前子文件夹下是否存在index.html
            if (fs.existsSync(path.join(appRoot, pageHtmlPath))) {
                pageConfigs.push({
                    // 如果子页面有独立JS入口就用，没有则留空
                    entry: fs.existsSync(path.join(appRoot, pageEntryPath)) ? pageEntryPath : '',
                    template: pageHtmlPath,
                    inject: {
                        data: {
                            title: pageName,
                            injectScript: `<script>window.APP_VERSION = '${app.version}'</script>`,
                        },
                    },
                    filename: `pages/${pageName}/index.html`
                });
            }
        });
    }

    return pageConfigs;
}

// 然后在plugins中使用这个函数
plugins: [
    image(),
    htmlPurge(),
    createHtmlPlugin(generateMultiPageConfigs()), // 动态生成的配置数组
],

4. 关键注意事项 #

• 路径基准问题：因为你设置了root: './app'，所以所有entry、template的路径都是相对于app目录的，千万别写错路径！
• 资源路径适配：子页面内的资源（CSS、图片、JS）尽量用相对路径（比如./assets/style.css），结合你设置的base: './'，能确保在多页面下正确加载。
• 重启服务生效：修改完vite.config.ts后，一定要重启Vite开发服务，新配置才会生效。
• 访问测试：重启后访问http://localhost:3000/pages/language/，应该就能正确加载对应子页面的index.html了。

之前的Stack Overflow方案没生效，大概率是因为你没考虑到root: './app'带来的路径基准变化，或者没给子页面正确指定filename和template路径，导致Vite没生成对应的页面输出。

备注：内容来源于stack exchange，提问作者Julien CORON