Nodejs 使用res.render()发送页面时，页面css文件地址不正确
Nodejs 使用res.render()发送页面时，页面css文件地址不正确
接收请求如下：
app.get('/page/:no', ……);
发送响应如下：
res.render('bla');
响应时，css文件地址前面多了/page，
例如：
GET /bower_components/bootstrap/dist/css/bootstrap.min.css 304 5ms （正确）
GET /page/bower_components/bootstrap/dist/css/bootstrap.min.css 404 3ms （错误，多了/page）
请问要肿么办？
当使用 res.render() 方法在 Node.js 中渲染模板并发送到客户端时，有时会遇到静态资源（如 CSS 文件）的路径不正确的问题。这通常是因为模板中的路径没有正确解析，导致路径前多了一个 /page。
为了解决这个问题，我们需要确保在模板中正确引用静态资源。以下是解决该问题的步骤和示例代码：
解决方案
-
确保静态资源目录正确配置： 首先，需要确保你的静态资源目录已经通过
express.static正确配置。例如，在应用启动时设置静态资源目录。 -
修正模板中的静态资源路径： 确保模板文件中的静态资源路径是相对于根目录的，而不是相对于当前页面的 URL 路径。
示例代码
假设你有一个 Express 应用，并且你希望渲染一个包含 CSS 的页面。以下是一个完整的示例：
const express = require('express');
const path = require('path');
const app = express();
// 设置静态资源目录
app.use(express.static(path.join(__dirname, 'public')));
// 处理路由
app.get('/page/:no', (req, res) => {
res.render('bla', { no: req.params.no });
});
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
模板文件 views/bla.ejs
确保在模板文件中引用静态资源时使用正确的路径。例如，如果你将 CSS 文件放在 public 目录下，则应这样引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 正确引用 CSS 文件 -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<h1>Page No: <%= no %></h1>
</body>
</html>
总结
通过以上步骤，你可以确保在使用 res.render() 发送页面时，CSS 文件的路径不会出现错误。关键在于正确配置静态资源目录，并在模板文件中使用相对路径来引用这些资源。
好吧，没人回答……跑去问老外了 人家说：因为我的卸载html里面的地址最前面没有加/的缘故，不加/表示相对路径…… 为什么我连这个都不知道……
提问link： stackoverflow
