为何使用Express的res.sendFile返回的HTML无法渲染CSS和JS？

问题原因 #

你当前只配置了返回HTML文件的路由，没有为Express配置静态资源托管规则。当浏览器加载完HTML后，会根据HTML内的相对路径请求对应的CSS、JS资源，这些请求没有对应的路由处理，服务端会返回404，导致样式和脚本无法加载。

解决方案 #

使用Express内置的express.static中间件托管静态资源目录即可，你可以直接将存放HTML的html文件夹设置为静态资源目录。

修改后的完整代码 #

const express = require("express")
const app = express()
const PORT = 8000

// 新增：配置静态资源托管，html目录下的所有资源都可以直接被访问
app.use(express.static('html'))

function getHTML(name) {
    return process.cwd() + "/html" + `/${name}` + `/${name}.html`
}

app.get("/password-generator", (req, res) => {
    res.sendFile(getHTML("password-generator"))
})

app.listen(PORT, () => {
    console.log("Website is on!")
})

补充说明 #

如果你的HTML内引用CSS/JS用的是相对路径，配置完上面的中间件就可以正常加载了。如果你希望统一静态资源的访问前缀，也可以给中间件加前缀，比如app.use('/static', express.static('html'))，对应的资源引用路径也要调整为/static/xxx/xxx.css的格式。

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