Express-js не может получить мои статические файлы, почему?

308

Я сократил свой код до самого простого приложения express-js, которое я мог сделать:

var express = require("express"),
    app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);

Мой каталог выглядит так:

static_file.js
/styles
  default.css

Тем не менее, когда я http://localhost:3001/styles/default.cssполучаю доступ, я получаю следующую ошибку:

Cannot GET / styles /
default.css

Я использую express 2.3.3и node 0.4.7. Что я делаю не так?

Кит Сунде
источник
проверьте ниже ссылку только 4ututorials.blogspot.com/2017/05/…
Декстер

Ответы:

492

Попробуй http://localhost:3001/default.css.

Чтобы иметь /stylesв своем запросе URL, используйте:

app.use("/styles", express.static(__dirname + '/styles'));

Посмотрите на примеры на этой странице :

//Serve static content for the app from the "public" directory in the application directory.

    // GET /style.css etc
    app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

    // GET /static/style.css etc.
    app.use('/static', express.static(__dirname + '/public'));
Giacomo
источник
42
Спасибо. Как новичок в Node и Express, документация Express кажется отрывочной, пока вы не обнаружите, что Connect - это то, где находятся документы промежуточного программного обеспечения.
Nate
4
Ага. Это был пропущенный слеш в моем случае.
Борисдиакур
В моем случае я не осознавал, что путь монтирования был включен в путь, как вы объяснили во втором примере. Спасибо!
Майк Чил
В случае новой установки вы должны убедиться, что ваш экспресс-модуль установлен правильно ( expressjs.com/en/starter/install.html ), а затем проверить путь и имя своего каталога, как сказал Giacomo;)
Spl2nky
всегда используйте path.joinдля преодоления проблем кросс-платформенного разделителя каталогов. path.join (__dirname, '/')
Даг Чемберлен
35

У меня та же проблема. Я решил проблему с помощью следующего кода:

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));

Пример статического запроса:

http://pruebaexpress.lite.c9.io/js/socket.io.js

Мне нужно более простое решение. Это существует?

Давид Миро
источник
Спасибо, что поделились своим решением независимо от того, является ли оно оптимальным или нет. Если вы хотите снова открыть вопрос для оптимизации, рассмотрите возможность размещения нового вопроса с подробным описанием новых обстоятельств. Если оптимизация является единственной целью, вопрос может лучше подходить для SO Code Review .
15

default.css должен быть доступен на http://localhost:3001/default.css

Оператор stylesin app.use(express.static(__dirname + '/styles'));просто указывает Express искать в stylesкаталоге статический файл для обслуживания. Это не (смущает) тогда формирует часть пути, по которому это доступно.

diff_sky
источник
3
Полностью! Который по соглашению в express.js вы это делаете на /publicкотором есть css, js, imgпапки , так что вы можете http://localhost:3001/css/default.css:)
Kit Sunde
15

Эта работа для меня:

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));
user3418903
источник
9

В вашем server.js:

var express   =     require("express");
var app       =     express();
app.use(express.static(__dirname + '/public'));

Вы объявили express и app отдельно, создали папку с именем public или как вам нравится, и все же вы можете получить доступ к этой папке. В вашем шаблоне src вы добавили относительный путь из / public (или имя вашей папки в статических файлах). Остерегайтесь баров на маршрутах.

Баурин Леза
источник
6

Что сработало для меня:

Вместо того, чтобы писать app.use(express.static(__dirname + 'public/images'));в вашем app.js

Просто пиши app.use(express.static('public/images'));

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

<img src="/images/misc/background.jpg">

Надеюсь это поможет :)

Амир Аслам
источник
Это решило мою проблему. В моем коде путь к CSS работал нормально даже с конкатенацией __dirname (с использованием path.join), в то время как загрузка js не удалась.
Чим
Я рад, что помог :)
Амир Аслам
5

Я использую Bootstrap CSS, JS и шрифты в своем приложении. Я создал папку с именем assetв корневом каталоге приложения и поместил в нее все эти папки. Затем в файл сервера добавляется следующая строка:

app.use("/asset",express.static("asset"));

Эта линия позволяет мне загружать файлы , которые находятся в assetдиректории с /assetпутем префикса , как: http://localhost:3000/asset/css/bootstrap.min.css.

Теперь в представлениях я могу просто включить CSS и JS, как показано ниже:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">
Arsho
источник
5

для обслуживания статических файлов (css, images, js files) всего два шага:

  1. передать каталог CSS-файлов встроенному промежуточному программному обеспечению express.static

    var express = require('express');
    var app = express();
    /*public is folder in my project directory contains three folders
    css,image,js
    */
    //css  =>folder contains css file
    //image=>folder contains images
    //js   =>folder contains javascript files
    app.use(express.static( 'public/css'));
  2. чтобы получить доступ к файлам или изображениям CSS, просто введите URL http: // localhost: port / filename.css ex: http: // localhost: 8081 / bootstrap.css

нота: чтобы связать CSS-файлы с HTML, просто введите<link href="file_name.css" rel="stylesheet">

если я напишу этот код

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

для доступа к статическим файлам просто введите url: localhost: port / css / filename.css ex: http: // localhost: 8081 / css / bootstrap.css

обратите внимание, чтобы связать CSS-файлы с HTML просто добавьте следующую строку

<link href="css/file_name.css" rel="stylesheet">    
Ахмед Махмуд
источник
3

этот работал на меня

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

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

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

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

app.use('/user/javascripts',express.static(path.join(__dirname, 'public/javascripts')));
Джеймс Гичару
источник
1

Попробуйте получить к нему доступ с http: // localhost: 3001 / default.css .

   app.use(express.static(__dirname + '/styles'));

Вы на самом деле даете ему имя папки, то есть стили, а не ваш субурл.

Сунил Люлла
источник
1

Я нахожу свой файл CSS и добавляю к нему маршрут:

app.get('/css/MyCSS.css', function(req, res){
  res.sendFile(__dirname + '/public/css/MyCSS.css');
});

Тогда это похоже на работу.

Брен
источник
Я бы не рекомендовал этот подход, поскольку вы должны использовать ExpressJS .use()и express.static()методы для отправки туда, где вы обслуживаете свои файлы. В противном случае у вас будет один из этих маршрутизаторов для каждого файла в вашем общедоступном каталоге, и это требует много дополнительных затрат.
17
Это обходной путь, но я не думаю, что это уместно. Если у вас много CSS и JS-файлов, как вы можете их поддерживать?
Аршо
0

В дополнение к вышесказанному, убедитесь, что путь к статическому файлу начинается с / (ex ... / assets / css) ... для обслуживания статических файлов в любом каталоге выше основного (/ main)

bigskier91
источник
2
Дополнение к чему выше? Укажите это в своем ответе (при необходимости отметьте человека, который его опубликовал). ТАК часто меняется порядок ответов, так что все ответы видны, а не первые. Мы не знаем, о чем ты говоришь.
Захари Кнебель
0

если ваша настройка

myApp
  |
  |__ public
  |     |
  |     |__  stylesheets
  |     |     |
  |     |     |__ style.css
  |     |
  |     |___ img
  |           |
  |           |__ logo.png
  |
  |__ app.js

затем
положить в app.js

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

и обратитесь к вашему style.css: (в некотором файле .pug):

link(rel='stylesheet', href='/static/stylesheets/style.css')
Бар Horing
источник
Зачем вводить шаг переименования public -> static? Я бы сказал, что это еще более запутанная дополнительная информация. Но опять же,
перенаправление
0
  1. Создайте папку с публичным именем в проекте Nodejs
    .
  2. Поместите файл index.html в папку проекта Nodejs.
  3. Поместите все сценарии и CSS-файлы в общую папку.
  4. использование app.use( express.static('public'));

  5. и в index.html правильном пути сценариев к<script type="text/javascript" src="/javasrc/example.js"></script>

И теперь все работает нормально.

Хоссейн Мурдзаде
источник
0

статический каталог

проверьте изображение выше (статический каталог) для структуры dir

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))
helloJT
источник