如何配置Vite将*.fragment.fx文件以text/plain类型提供服务？

你可以通过Vite的server.middlewares添加自定义中间件，在不替换默认中间件的前提下，为.fragment.fx文件设置正确的Content-Type响应头，这是最简便的方案：

修改vite.config.js配置 #

在配置中添加server.middlewares.post数组，插入一个中间件函数来检查请求路径并设置响应头：

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
    return {
        resolve: {
            alias: {
                "babylonjs": mode === "development" ? "babylonjs/babylon.max" : "babylonjs",
            }
        },
        base: "",
        server: {
            middlewares: {
                post: [
                    (req, res, next) => {
                        if (req.url?.endsWith('.fragment.fx')) {
                            res.setHeader('Content-Type', 'text/plain');
                        }
                        next();
                    }
                ]
            }
        }
    };
});

原理说明 #

• Vite的中间件采用洋葱模型，post阶段的中间件会在默认静态文件服务处理完成后执行，此时我们可以修改已生成的响应头。
• 该中间件仅针对.fragment.fx后缀的请求设置text/plain类型，不会影响其他文件的正常服务。
• 无需禁用默认中间件，保留Vite原生的开发服务能力，同时解决MIME类型识别错误问题。

补充说明 #

你之前尝试的assetsInclude配置主要用于让Vite在打包流程中识别特定类型的资源文件，但不适用于BabylonJS直接发起HTTP请求的场景，因此无需启用该配置。

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