статические файлы не работают в дочерних маршрутах в Express JS - PullRequest
0 голосов
/ 20 сентября 2018

Я сгенерировал структуру проекта с помощью экспресс-генератора. В app.js У меня есть следующий код:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var minifyHTML = require('express-minify-html');
var minify = require('express-minify');



var indexRouter = require('./routes/index');
var aboutRouter = require('./routes/about');
var productsRouter = require('./routes/products');
var contactRouter = require('./routes/contact');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');


// Minifying HTML Code
app.use(minifyHTML({
    override:      true,
    exception_url: false,
    htmlMinifier: {
        removeComments:            true,
        collapseWhitespace:        true,
        collapseBooleanAttributes: true,
        removeAttributeQuotes:     true,
        removeEmptyAttributes:     true,
        minifyJS:                  true
    }
}));

//Minifying JS Code
app.use(minify({
  cache: false,
  uglifyJsModule: null,
  errorHandler: null,
  jsMatch: /js/,
  cssMatch: /css/,
  jsonMatch: /json/,
  sassMatch: /scss/,
  lessMatch: /less/,
  stylusMatch: /stylus/,
  coffeeScriptMatch: /coffeescript/,
}));

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/about-us', aboutRouter);
app.use('/products', productsRouter);
app.use('/contact-us', contactRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

В productsRouter у меня есть следующий код:

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/hospital-cubical-track-system', function(req, res, next) {
  res.render('products/hospital-cubical-track-system', { title : 'Hospital Cubical Track System'});
});

router.get('/telescopic-iv-bag-hanger', function(req, res, next) {
  res.render('products/telescopic-iv-bag-hanger', { title : 'Telescopic IV Bag Hanger'});
});

router.get('/wall-protection-system', function(req, res, next) {
  res.render('products/wall-protection-system', { title : 'Wall Protection System'});
});

router.get('/hospital-blinds', function(req, res, next) {
  res.render('products/hospital-blinds', { title : 'Hospital Blinds'});
});

router.get('/nurse-call-system', function(req, res, next) {
  res.render('products/nurse-call-system', { title : 'Nurse Call System'});
});

router.get('/hospital-linen', function(req, res, next) {
  res.render('products/hospital-linen', { title : 'Hospital Linen'});
});


module.exports = router;

Теперь на вспомогательных маршрутах, таких как "products / hospital-cubical-track-system", статические css-файлы проекта не загружаются, когда "/, / about, / contact" загружают css js статические файлы в порядке.пожалуйста, помогите мне

1 Ответ

0 голосов
/ 21 сентября 2018

Из комментариев кажется, что вы используете относительные ссылки для файлов ресурсов на своих html-страницах, когда вам следует использовать абсолютные ссылки.

Поэтому вместо использования:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Вы должны использовать:

<link rel="stylesheet" type="text/css" href="/css/style.css" />

Обратите внимание на начало /, указывающее на использование корня вашего сайта.См. эту ссылку для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...