Express构建SPA加载JS模块返回text/html MIME类型错误如何解决

• 核心问题1：server.js 中SPA入口文件的路径配置错误。你的index.html实际存放在frontend/static目录下，但代码中写的路径是frontend/index.html，该路径不存在，所有未命中静态资源的请求最终都会返回404错误的HTML内容，而非正常的入口页面。
• 核心问题2：浏览器原生ES模块导入要求明确携带文件后缀，你代码里的import Home from "./views/Home"、import AbstractView from "./AbstractView"都没有带.js后缀，浏览器请求资源时会去找无后缀的文件，静态资源中间件无法匹配到对应的.js文件，最终请求落到全局/*路由返回HTML内容，触发MIME类型校验不通过的报错。
• 额外小问题：index.js里的事件委托判断if (e.target.matches("[data-link"))缺少右中括号，会触发语法错误。

1. 修正server.js的入口文件路径
   将原来的代码：

res.sendFile(path.resolve(__dirname, "frontend", "index.html"))

修改为：

res.sendFile(path.resolve(__dirname, "frontend", "static", "index.html"))

2. 给所有ES模块导入语句补全.js后缀

• index.js中的import Home from "./views/Home"改为import Home from "./views/Home.js"
• Home.js中的import AbstractView from "./AbstractView"改为import AbstractView from "./AbstractView.js"

3. 修正选择器语法错误
   将index.js中的if (e.target.matches("[data-link"))改为if (e.target.matches("[data-link]"))

修改完成后重启服务即可正常运行。

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