如何在Elysia+Bun构建的路由中正确返回HTML文件并加载脚本？

问题原因 #

你的通配路由*会拦截所有请求（包括js模块文件的请求），导致服务器把index.html返回给脚本请求，浏览器收到text/html类型的响应，不符合模块脚本要求的application/javascript类型，因此报错。

解决方案 #

调整路由注册顺序，让静态资源插件优先处理静态文件请求，仅当资源不存在时才返回index.html，同时确保HTML的MIME类型正确。

修改后的代码 #

import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

const server = new Elysia()

// 优先注册静态资源插件，处理dist目录下的所有静态文件
server.use(staticPlugin({
  assets: './dist',
  prefix: ''
}))

// 通配路由放在最后，仅当静态资源不存在时返回index.html
server.get('*', async () => {
  const htmlFile = Bun.file('./dist/index.html')
  return new Response(htmlFile, {
    headers: {
      'Content-Type': 'text/html; charset=utf-8'
    }
  })
})

server.listen(3000, () => {
  console.log(`Website server is listening on port 3000`);
})

关键说明 #

1. 路由顺序：Elysia按注册顺序匹配路由，静态资源插件先注册，会优先响应dist目录下的静态文件（如/main.js），返回正确的MIME类型。
2. 通配路由 fallback：只有当请求的资源不存在时，才会触发通配路由返回index.html，适配单页应用（SPA）的路由需求。
3. 显式设置Content-Type：虽然Bun通常能自动识别文件类型，但显式设置可以避免识别异常，确保HTML文件以正确类型返回。

额外检查项 #

• 确认HTML中的script标签路径正确，比如使用<script type="module" src="/main.js"></script>，确保路径指向dist目录下的对应文件。
• 确保Bun版本为最新，避免已知的MIME类型相关bug。

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