找不到 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')
    } );

這是結構