Express-js không thể NHẬN các tệp tĩnh của tôi, tại sao?

Tôi đã giảm mã của mình xuống ứng dụng express-js đơn giản nhất tôi có thể thực hiện:

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

Thư mục của tôi trông như thế này:

static_file.js
/styles
  default.css

Tuy nhiên, khi tôi truy cập, http://localhost:3001/styles/default.csstôi nhận được lỗi sau:

Cannot GET / styles /
default.css

Tôi đang sử dụng express 2.3.3và node 0.4.7. Tôi đang làm gì sai?

Hãy thử http://localhost:3001/default.css.

Để có /stylesURL yêu cầu của bạn, hãy sử dụng:

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

Nhìn vào các ví dụ trên trang này :

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

Tôi có cùng một vấn đề. Tôi đã giải quyết vấn đề với mã sau đây:

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

Ví dụ yêu cầu tĩnh:

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

Tôi cần một giải pháp đơn giản hơn. Nó tồn tại?

default.css nên có sẵn tại http://localhost:3001/default.css

Các stylesin app.use(express.static(__dirname + '/styles'));chỉ cho express để tìm trong stylesthư mục cho một tệp tĩnh để phục vụ. Nó không (một cách khó hiểu) sau đó tạo thành một phần của con đường mà nó có sẵn trên đó.

Công việc này đối với tôi:

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

Trong server.js của bạn:

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

Bạn đã khai báo express và ứng dụng riêng biệt, tạo một thư mục có tên 'công khai' hoặc tùy thích, nhưng bạn vẫn có thể truy cập vào các thư mục này. Trong src mẫu của bạn, bạn đã thêm đường dẫn tương đối từ / public (hoặc tên của số phận thư mục của bạn vào các tệp tĩnh). Cẩn thận với các thanh trên các tuyến đường.

Những gì làm việc cho tôi là:

Thay vì viết app.use(express.static(__dirname + 'public/images'));trong app.js của bạn

Đơn giản chỉ cần viết app.use(express.static('public/images'));

tức là loại bỏ tên thư mục gốc trong đường dẫn. Và sau đó bạn có thể sử dụng đường dẫn tĩnh một cách hiệu quả trong các tệp js khác, Ví dụ:

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

Hi vọng điêu nay co ich :)

Tôi đang sử dụng Bootstrap CSS, JS và Fonts trong ứng dụng của mình. Tôi đã tạo một thư mục được gọi assettrong thư mục gốc của ứng dụng và đặt tất cả các thư mục này bên trong nó. Sau đó, trong tập tin máy chủ được thêm dòng sau:

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

Dòng này cho phép tôi tải các tệp trong assetthư mục từ /assettiền tố đường dẫn như : http://localhost:3000/asset/css/bootstrap.min.css.

Bây giờ trong các khung nhìn, tôi có thể chỉ cần bao gồm CSS và JS như bên dưới:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

để phục vụ các tệp tĩnh (css, hình ảnh, tệp js) chỉ hai bước:

1. vượt qua thư mục của các tập tin css để xây dựng trong middleware 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. để truy cập tập tin hoặc hình ảnh css, chỉ cần nhập url http: // localhost: port / filename.css ex: http: // localhost: 8081 / bootstrap.css

Ghi chú: để liên kết các tập tin css với html chỉ cần gõ<link href="file_name.css" rel="stylesheet">

nếu tôi viết mã này

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

để truy cập các tệp tĩnh, chỉ cần nhập url: localhost: port / css / filename.css ex: http: // localhost: 8081 / css / bootstrap.css

lưu ý để liên kết các tập tin css với html chỉ cần thêm dòng sau

<link href="css/file_name.css" rel="stylesheet">    

cái này làm việc cho tôi

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

Hãy thử truy cập nó bằng http: // localhost: 3001 / default.css .

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

Bạn đang thực sự đặt cho nó tên của thư mục tức là các kiểu không phải là suburl của bạn.

Tôi tìm tập tin css của mình và thêm một tuyến đường vào nó:

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

Sau đó, nó dường như làm việc.

Ngoài ra, hãy đảm bảo đường dẫn tệp tĩnh bắt đầu bằng / (ví dụ ... / nội dung / css) ... để phục vụ các tệp tĩnh trong bất kỳ thư mục nào phía trên thư mục chính (/ main)

nếu thiết lập của bạn

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

sau đó,
đặt app.js

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

và tham khảo style.css của bạn: (trong một số tệp .pug):

link(rel='stylesheet', href='/static/stylesheets/style.css')

1. Tạo một thư mục có tên 'công khai' trong
   thư mục dự án Nodejs .
2. Đặt tệp index.html vào thư mục dự án Nodejs.
3. Đặt tất cả tập lệnh và tập tin css vào thư mục công cộng.

4. Sử dụng app.use( express.static('public'));

5. và trong index.html đường dẫn chính xác của tập lệnh tới<script type="text/javascript" src="/javasrc/example.js"></script>

Và bây giờ tất cả mọi thứ hoạt động tốt.

thư mục tĩnh

kiểm tra hình ảnh trên (thư mục tĩnh) cho cấu trúc 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'))