Почему элементы CSS и Bootstrap исчезают с сервера экспресс-узла?

1

Сначала я сделал базовый сервер узлов следующим образом:

  var connect = require('connect');

  var serveStatic = require('serve-static');
  connect().use(serveStatic(__dirname)).listen(8080, function() {
    console.log('Server running on 8080...');
  });

Затем я заменил его на экспресс-сервер следующим образом:

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

   app.get('/',function(req,res){
   res.sendFile(path.join(__dirname+'/index.html'));

   });

   app.use(express.static("public"));

   app.listen(8080);

   console.log("Running at Port 8080");

С первым, все работало нормально. CSS, JQuery, изображения и т.д., Но со вторым, некоторые из моих стилей полностью исчезли, и он не может достичь изображений на сайте. Что я упустил? Как я могу это решить?

Теги:
express

2 ответа

2
Лучший ответ

Вы не используете статические файлы.

app.use(express.static("public"))

Это будет обслуживать все файлы из /public непосредственно в корне вашего сервера /. Если вы хотите обслуживать их в /static вам нужно немного изменить код.

app.use("/static", express.static("public"))

пример

Структура файла

├── node_modules
├── package.json
├── public
| └ style.css
|
└── server.js

server.js

var express = require("express")
var app = express()

app.use(express.static("public"))

app.listen(3333)

После запуска server.js вы должны иметь доступ к http://localhost: 3333/style.css (и каждый другой файл в каталоге /public)

Поделиться
  • 0
    Это не работает :( Я знаю, что должно, но это не имеет никакого эффекта. Я обновил свой код с вашей строкой. Я создал целую папку и поместил в нее данные.
  • 0
    Посмотрите на мой шаблон репозитория здесь он может помочь вам. Вы, вероятно, просто портите структуру папок или <link rel... в html, просто проверьте html и попробуйте получить прямой доступ к файлам .css и .js.
Показать ещё 3 комментария
2

Чтобы обслуживать статические файлы, посмотрите на https://expressjs.com/en/starter/static-files.html, который показывает, что вы можете использовать:

app.use(express.static('public'))
app.use(express.static('files'))

для обслуживания статических файлов из папки public доступа и files. В вашем примере кода вы обслуживаете только index.html.

Поделиться
  • 0
    Я пытаюсь, но сейчас это не работает. Поэтому мне нужно создать папку с именем static, поместить в нее весь контент, а затем использовать следующий фрагмент кода: app.use (express.static ('public')) в файле server.js.
  • 0
    Нет, вы просто создаете папку с любым именем, которое хотите. В моем примере я использовал public и files качестве имен папок. Пока вы вызываете метод express.static с именем вашей папки

Ещё вопросы

Сообщество Overcoder
Наверх
Меню