Vite-plugin-handlebars多页面配置下/public页面失效问题求助

问题根源 #

Vite对public目录下的文件采用直接静态复制的处理逻辑，不会经过任何插件的转换流程，因此public/about.html无法被vite-plugin-handlebars解析处理。只有被配置为Vite入口的HTML文件，才会触发插件的处理逻辑。

解决方案步骤 #

1. 调整项目目录结构 #

将需要Handlebars处理的HTML文件从public目录移出，放到项目根目录或专门的页面目录（如pages/）中。示例结构如下：

├── package.json
├── vite.config.js
├── index.html
├── about.html
└── public
    └── partials
        ├── _head.hbs
        └── _nav.hbs

2. 配置Vite多页面入口 #

在vite.config.js中添加build.rollupOptions.input，将所有需要处理的HTML文件注册为Vite入口。同时删除无用的assetsInclude配置，并确保pageData中的路径与实际文件路径一致：

import { resolve } from 'path';
import handlebars from 'vite-plugin-handlebars';
import { defineConfig } from 'vite';

const pageData = {
    '/index.html': {
      title: 'Home',
    },
    '/about.html': {
      title: 'About',
    },
};

export default defineConfig({
    base: '/',
    server: {
        host: true
    },
    // 配置多页面入口
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'index.html'),
                about: resolve(__dirname, 'about.html'),
            },
        },
    },
    plugins: [
        handlebars({
            partialDirectory: resolve(__dirname, './public/partials'),
            context(pagePath) {
                return pageData[pagePath];
            },
        }),
    ],
});

3. 验证效果 #

运行npm run dev，访问/about.html即可看到Handlebars的模板语法（如{{> _head }}）已被正常解析。

补充说明 #

如果希望页面文件更规整，也可以将所有HTML文件放到pages/目录下，此时只需同步修改vite.config.js中的入口路径和pageData中的键值：

// pageData调整为对应pages目录下的路径
const pageData = {
    '/pages/index.html': {
      title: 'Home',
    },
    '/pages/about.html': {
      title: 'About',
    },
};

// build.rollupOptions.input调整为pages目录路径
build: {
    rollupOptions: {
        input: {
            main: resolve(__dirname, 'pages/index.html'),
            about: resolve(__dirname, 'pages/about.html'),
        },
    },
},

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