在我的 Node Express 服务器上路由 css 的问题答案

【问题标题】：Problem with routing css on my Node Express server在我的 Node Express 服务器上路由 css 的问题
【发布时间】：2019-06-17 19:58:39
【问题描述】：

我正在为我的网页构建一个后端，文件结构如下：

public
  css
    main.css
    main_b.css
  index.hbs
  index_b.hbs
server
  server.js

样式表在索引文件中由链接属性引用，其中包含：

rel="stylesheet" type="text/css" href="main.css"

rel="stylesheet" type="text/css" href="main_b.css"

这是我的 server.js：

const path = require('path');
const fs = require('fs');

const express = require('express');

const app = express();

const hbs = require('hbs');
    
hbs.registerPartials(path.join(__dirname, '../public/partials'));
app.set('view engine', 'hbs');

app.use(express.static(path.join(__dirname, '../public/css')));
    
// activity logger 
app.use((req, res, next) => {
  const now = new Date().toString();
  const logEntry = `${now}: ${req.headers.host} ${req.method}${req.url}`;
  fs.appendFile(path.join(__dirname, '../server/server.log'), logEntry.concat('\n'), (error) => {
    if (error) {
      console.log(error);
    }
  });
  process.env.route = req.path;
  next();
});

app.get('*', (req, res) => {
  switch (process.env.route) {
    case '/': // home page
      res.render('../public/index.hbs');
      break;
    case '/b': // basic layout 
      res.render('../public/index_b.hbs');
      break;
    
    default: // unknown routes
      res.render('../public/index.hbs');
  }
});

app.listen(3000);

在请求 localhost:3000 时，日志条目正常：

2019 年 1 月 24 日星期四 07:57:08 GMT+0200（东欧标准时间）：localhost:3000 GET/

在请求localhost:3000/abc时，log entry也可以：

2019 年 1 月 24 日星期四 07:57:08 GMT+0200（东欧标准时间）：localhost:3000 GET/abc

问题显示在使用 localhost:3000/abc/def 等子路由的测试请求上，css 不呈现，日志条目为：

2019 年 1 月 24 日星期四 08:04:55 GMT+0200（东欧标准时间）：localhost:3000 GET/abc/def 2019 年 1 月 24 日星期四 08:04:56 GMT+0200（东欧标准时间）：localhost:3000 GET/abc/teamk-reset.css 2019 年 1 月 24 日星期四 08:04:56 GMT+0200（东欧标准时间）：localhost:3000 GET/abc/main.css

看到那部分路由是用来修改css查找路径的，并尝试通过Express.static()中options对象的index和redirect属性解决问题，但没有成功。

很高兴收到一些指示/参考，否则我可能应该重构我的路线查询方法。

【问题讨论】：

标签： css node.js express

【解决方案1】：

我发现我的代码有问题，

样式表应在索引文件中通过链接属性引用，其中包含：

rel="stylesheet" type="text/css" href="/main.css"

rel="stylesheet" type="text/css" href="/main_b.css"

，它们的名称前面带有“/”，以便正确构建查找 URL。

【讨论】：