NodeJS部署Web服务后导入JS至HTML遇MIME类型冲突问题求助

先明确核心问题，对应给出解决方案：

1. 静态资源路径不匹配导致MIME类型冲突 #

你当前用express.static('includes')把includes目录直接映射到网站根路径/，也就是说：

• 访问/main.js会返回includes/main.js
• 但你在HTML里写的是/includes/main.js，Express会先去includes/includes/main.js找文件（不存在），再去views/includes/main.js找（也不存在），最后因为没有匹配的路由，返回了index.html的内容（text/html类型），浏览器识别到JS资源返回了HTML，触发MIME冲突。

解决方法二选一：

方法A：修改HTML中的引用路径 #

把HTML里的JS引用改成：

<script src="/main.js"></script>

方法B：给静态目录添加挂载前缀 #

修改Express的静态资源配置，给includes目录加上/includes的访问前缀：

// 替换原来的app.use(express.static('includes'));
app.use('/includes', express.static('includes'));

这样访问/includes/main.js就会正确指向includes/main.js，Express会自动设置正确的application/javascript MIME类型。

2. 视图引擎配置与实际文件不匹配的潜在问题 #

你设置了view engine: 'pug'，但views目录里是index.html，res.render('index')会尝试查找index.pug文件，这会导致报错。解决这个问题：

• 要么把index.html重命名为index.pug并调整为pug语法
• 要么改用res.sendFile返回HTML文件，修改路由代码：

const path = require('path'); // 先引入path模块

app.get('/', async (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

同时可以删掉app.set('views', 'views');和app.set('view engine', 'pug');这两行无效配置。

修改后的完整示例代码（方法B+sendFile方案） #

var express = require('express');
const path = require('path');

const app = express();
app.use('/includes', express.static('includes'));
app.use(express.static('views'));

app.get('/', async (req, res) => {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(3000, () => {
    console.log('listening on port 3000');
})

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