Question

我用express和pug作为视图/模板eingine构建我的第一个node.js应用程序。我遇到的一个问题是：

问题：在其他路线上加载相同的CSS文件＆amp; template.pugs但不会加载一个特定的路径/模板。得到404错误。

我的server.js ：

var express = require('express');   
var path = require('path');
var app = express();

var bodyParser = require("body-parser");

app.set('views', './templates');
app.set('view engine', 'pug');

app.use(express.static(path.join(__dirname, './public')));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

require('./router')(app);

var listener = app.listen(process.env.PORT, function() {
  console.log('Server is live on PORT : ' + listener.address().port);
});

我的router.js （css加载＆＃34; /＆＃34;＆amp;＆＃34; / events＆＃34;，不适用于/ events / new＆＃34;）：

var controller = require ('./controller');

module.exports = function (app) {

//start
app.get('/', controller.index);

// All Events View
app.get('/events', controller.show_events);
app.get('/events/new', controller.new_event_form);

};

my controller.js （css加载＆＃34;索引＆＃34;＆amp;＆＃34; show_events＆＃34;，不是＆＃34; new_event_form＆＃34;）

module.exports = {
 index: index,
 show_events: show_events,
 new_event_form: new_event_form
};

function index (req, res) {
  res.render('index');
}

function show_events(req, res) {
  res.render('show_events'); 
};

function new_event_form(req, res) {
  res.render('new_event_form');
};

现在来了奇怪的部分。对于这个模板＆＃34; show_events.pug＆＃34;它加载css文件。路线：/ events

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Database: Events
      menu
        a(href='/')
          h2 Back
        a(href='/events/new')
          h2 Create New Event

但对于这个模板＆＃34; new_event_form.pug＆＃34;它不会加载css文件。路线：/ events / new

doctype

html
  head
    title Database
    link(rel='stylesheet', href='./css/main.css')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700')
  body
    div#wrapper
      header
        h1 Event: New
      menu
        a(href='/events')
         h2 Cancel

Css也完美地加载索引＆＃34; /＆＃34;路线。

目前的文件夹/文件结构

 controller.js
 router.js
 server.js
 public
 - - css
 - - - - main.css
 templates
 - - index.pug
 - - show_events.pug
 - - new_event_form.pug

到目前为止找不到任何错误，不知道它为什么在索引路由和show_events路由上加载，而不是在new_event_form路由上加载。

感谢任何提示或解决方案！

更新比较路线时我发现了一些不同之处： - 对于https://terminal.glitch.me/events，css文件的请求地址为https://terminal.glitch.me/css/main.css - https://terminal.glitch.me/events/new请求地址为css 档案是https://terminal.glitch.me/events/css/main.css

Answer 1

这么简单：

在链接引用应包含的事件/新路由的pug文件中 /css/main.css之前的2个点，而不是1个

所以我改变了这个

link(rel='stylesheet', href='./css/main.css')

到这个

link(rel='stylesheet', href='../css/main.css')

现在它在工作

我不清楚如何将../这类事物用于绝对路径......

Node.js Pug - CSS不会在一个特定页面上加载

1 个答案: