Node.js Express 无法获取静态文件并且路由比一个文件夹级别更深

Question

在我问这个问题之前是我的 node.js express 应用程序的文件夹结构：

/home server.js index.html /app /routes public.js /public /css main.css

这是我在 server.js 中的内容：

// ROUTING FOR STATIC CONTENT
var public_dir = __dirname + '/public';
app.use(express.static(public_dir));

// INITIALIZE ROUTER
var public_router = express.Router();

// IMPORT PUBLIC ROUTES
require('./app/routes/public')(public_router, public_dir);

// REGISTER ROUTES
app.use('/', public_router);

这是我在/app/routes/public.js中的内容：

var path = require('path');

module.exports = function(public_router, public_dir) {

    public_router.get('/new', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });

    public_router.get('/popular', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });

    public_router.get('/popular/today', function(req, res) {
        res.sendFile(path.join(public_dir, 'index.html'));
    });
}

在 index.html 中，我这样调用 css 文件：

<link rel="stylesheet" href="css/main.css">

问题：

当我访问 mydomain.com/new 和 mydomain.com/popular, css 文件时已加载且页面已正确呈现。但是，当我访问 mydomain.com/popular/today 时，css 文件未正确加载。在 chrome 开发工具中，我看到浏览器正在尝试从不正确的流行文件夹加载 css。

如有任何想法或意见，我们将不胜感激。提前致谢！

Answer 1

将 <link rel="stylesheet" href="css/main.css"> 更改为 <link rel="stylesheet" href="/css/main.css">。

注意前缀 /。这将使浏览器开始搜索树的根而不是使用相对路径。

Node.js Express 无法获取静态文件并且路由比一个文件夹级别更深

Node.js Express not able to get static files and route is deeper then one folder level

javascript

css

node.js

express