Express-js не може отримати мої статичні файли, чому?

Я звів свій код до найпростішої програми 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. Що я роблю неправильно?

Спробуйте 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'));

У мене така ж проблема. Я вирішив проблему із наступним кодом:

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

Мені потрібно більш просте рішення. Чи існує?

default.css має бути доступний за адресою http://localhost:3001/default.css

stylesУ app.use(express.static(__dirname + '/styles'));просто говорить висловити , щоб подивитися в stylesкаталозі для статичного файлу , щоб служити. Це не (заплутано), то утворює частину шляху, на якому він доступний.

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

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

У вашому сервері.js:

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

Ви оголосили експрес та додаток окремо, створіть папку з назвою "загальнодоступна" або як завгодно, і все ж можете отримати доступ до цієї папки. У своєму шаблоні src ви додали відносний шлях від / public (або ім'я долі вашої папки до статичних файлів). Остерігайтеся барів на маршрутах.

Що для мене спрацювало:

Замість того, щоб писати app.use(express.static(__dirname + 'public/images'));у своєму app.js

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

тобто видаліть ім'я кореневого каталогу у шляху. І тоді ви можете ефективно використовувати статичний шлях в інших js-файлах, наприклад:

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

Сподіваюся, це допомагає :)

Я використовую у своїй програмі Bootstrap CSS, JS та Fonts. Я створив папку з назвою 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">

для обслуговування статичних файлів (css, зображень, js-файлів) всього два кроки:

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">    

цей працював на мене

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')));

Спробуйте отримати доступ до нього за допомогою http: // localhost: 3001 / default.css .

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

Ви фактично даєте йому ім'я папки, тобто стилі, а не ваше передмістя.

Я знаходжу свій файл css і додаю до нього маршрут:

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

Тоді, здається, працює.

На додаток до вище, переконайтеся, що статичний шлях до файлу починається з / (ex ... / tools / css) ... для обслуговування статичних файлів у будь-якому каталозі над головним каталогом (/ main)

якщо ваша установка

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')

1. Створіть папку з ім'ям 'public' у папці проекту 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>

А зараз все добре працює.

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

перевірте наведене вище зображення (статичний каталог) на наявність структури 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'))