Node.js中EJS文件如何离线使用Bootstrap？

嘿，折腾12小时确实够闹心的，其实这个问题核心是Express没配置静态资源托管——虽然你已经搞定了404，但没让Express正确处理public目录下的静态文件，导致浏览器没拿到有效的CSS内容，样式自然不生效。按下面几步改就能解决：

1. 给Express添加静态资源托管中间件 #

打开你的app0.js，在设置视图引擎之后，加一行代码来托管public目录：

//setup
var express = require('express'),
app = express(),
bodyParser = require('body-parser')

app.set('view engine','ejs');
// 新增：让Express托管public目录下的所有静态资源
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get("/grid", function(req, res, next){
 res.render("grid")
});

app.listen(3000,function(){
 console.log("serving test demo on port 3000")
});

这行代码告诉Express：所有静态资源请求（比如CSS、JS、图片）都去public目录里找，这样它才能正确返回bootstrap.css的完整内容。

2. 修正grid.ejs里的CSS引用路径 #

因为已经配置了静态资源托管，public目录相当于静态资源的根路径，所以你需要把引用路径里的public/去掉，换成绝对路径更稳妥（避免路由层级变化导致路径出错）：

修改views/grid.ejs里的link标签：

<link rel="stylesheet" type="text/css" href="/bootstrap.css">

3. 验证效果 #

• 重启你的Express服务：在终端运行node app0.js
• 访问http://localhost:3000/grid，看看栅格布局是不是正常生效了
• 可以打开浏览器F12的Network标签，确认bootstrap.css的请求状态是200 OK，并且Response里能看到完整的CSS代码

为什么之前的配置不行？ #

Express默认不会自动处理静态文件请求，哪怕你把文件放在public目录，没有express.static中间件，Express不知道要从这个目录读取资源。之前解决404可能只是临时调整了路径，但没有让Express正确解析并返回CSS文件的内容，导致浏览器拿到的不是有效的样式代码，自然没法渲染出Bootstrap的栅格效果。

这个方案完全适配你生产环境离线、不能用Apache的需求，所有静态资源都在本地public目录，不需要联网加载外部资源。

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