找不到 Node.js 公共 css 文件 404

Question

我正在学习 node.js，但在将公共 CSS 文件提供给一个 URL 时出错。 它几乎适用于所有页面，我进入页面并从 127.0.0.1/css/style.css 加载 css 文件。 当 URL 为 127.0.0.1/project/idProject 时，它会尝试从 127.0.0.1/project/css/style.css 获取 css 文件。

// INCLUDE MODULES =======================================================
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var Twig = require('twig');
var twig = Twig.twig;
var path = require('path');
var mongoose = require('mongoose');
var passport = require('passport');
var flash    = require('connect-flash');
var configDB = require('./config/database.js');

// Assets ================================================================
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.favicon(path.join(__dirname, 'public/images/favicon.ico'))); 
// Start mongoose
mongoose.connect(configDB.url);

// USER MANAGEMENT =======================================================
require('./config/passport')(passport); // pass passport for configuration
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.json());       // to support JSON-encoded bodies
app.use(express.urlencoded()); // to support URL-encoded bodies
app.set('view engine', 'twig'); // set up twig for templating
app.use(express.session({ secret: 'ilovescotchscotchyscotchscotch' })); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions
app.use(flash())

// ROUTES =======================================================
// Set authentication variable
app.use(function (req, res, next) {
    app.locals.login = req.isAuthenticated();
    next();
});
require('./app/routes.js')(app, passport);

//ERROR MANAGEMENT =======================================================
app.use(app.router);
app.use(function(req, res, next){
  res.status(404);

  // respond with html page
  if (req.accepts('html')) {
    res.render('errors/404.twig', { url: req.url });
    return;
  }
  // respond with json
  if (req.accepts('json')) {
    res.send({ error: 'Not found' });
    return;
  }
  // default to plain-text. send()
  res.type('txt').send('Not found');
});
/*app.use(function(err, req, res, next){
  // we may use properties of the error object
  // here and next(err) appropriately, or if
  // we possibly recovered from the error, simply next().
  res.status(err.status || 500);
  res.render('errors/500.twig', { error: err });
});*/

//SOCKET IO =======================================================
//Quand on client se connecte, on le note dans la console
io.sockets.on('connection', function (socket) {
    console.log("New connection");
});

// LISTEN SERVER =======================================================
server.listen(80);

关于如何解决这个问题的任何想法？

问候 ！

Answer 1

我尝试了我在评论中看到的方法，因为它对我不起作用，所以我发布了一个有效的答案。

所有 .css 文件都是静态的，因此您必须将它们提供给客户端。 但是，您不会将静态文件作为快速中间件提供。 因此，您必须添加它们。

app.use(express.static(__dirname, 'css'));

Answer 2

嗨，解决这个问题对我来说是一个问题，但在萨尔瓦多的帮助下，这是可能的。

我唯一要放的是所有代码，并且您在 html 中进行引用，您只需要将文件而不是文件夹放在 html 文件中。

  //The index.js code
    var express = require('express');
    const path = require ('path');
    //app va a ser mi servidor.
    var app = express();

    app.set('port', 3000)

    //app.use(express.static('./public'));
    //app.use(express.static( 'css'));
    app.use(express.static(path.join(__dirname, 'public')));
    app.use(express.static(path.join(__dirname, 'css')));
    app.listen(app.get('port'), () => {
    console.log('localhost:3000')
    } );

这是结构