Express Node.js项目中main.css无法与同目录header.ejs关联求助

阿华AIGC实验室

2026-5-22

解决Express项目中CSS文件无法与EJS模板关联的问题

我帮你排查下这个问题——在Express项目里无法加载CSS文件，大概率是因为你没配置静态文件服务，这是新手用Express时很容易忽略的点。Express默认不会主动暴露项目里的静态资源（比如CSS、JS、图片），必须手动配置中间件来开启这个功能。

具体解决步骤：

整理项目文件结构
在你的项目根目录下创建一个public文件夹（这个名字是Express约定俗成的，也可以用其他名字比如assets），把你的main.css文件移动到这个文件夹里。如果需要分类管理，还可以在public下再建css子文件夹，把CSS文件放进去。

在app.js中配置静态文件服务
在你的路由代码之前，添加express.static中间件的配置，这样Express就知道去哪里找静态资源了。修改后的app.js代码如下：

var express = require("express")
var app = express()
var request = require("request");

// 配置静态文件服务，指定public文件夹为静态资源目录
app.use(express.static("public"));

app.set("view engine", "ejs");

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

app.get("/results", function(req, res){
  var url = "http://www.omdbapi.com/?s="+req.query.search+"&apikey=你的API密钥";
  // 这里补全你的请求逻辑，比如调用request获取数据后渲染页面
});

// 别忘了添加监听端口的代码，确保服务器能启动
app.listen(3000, function(){
  console.log("服务器已启动在3000端口");
});

修改header.ejs中CSS的引用路径
现在你需要在EJS模板里用正确的路径引用CSS文件：
- 如果main.css直接放在public下，引用路径为：
```
<link rel="stylesheet" href="/main.css">
```
- 如果你把CSS放在public/css子文件夹里，路径就改成：
```
<link rel="stylesheet" href="/css/main.css">
```