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

ใน server.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 และแบบอักษรในแอปพลิเคชันของฉัน ฉันสร้างโฟลเดอร์ที่เรียกว่าassetในไดเรกทอรีรากของแอพและวางโฟลเดอร์เหล่านี้ไว้ข้างใน จากนั้นในไฟล์เซิร์ฟเวอร์เพิ่มบรรทัดต่อไปนี้:

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

บรรทัดนี้ช่วยให้ผมที่จะโหลดไฟล์ที่อยู่ในassetไดเรกทอรีจากคำนำหน้าเส้นทางที่ชอบ:/assethttp://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เช่น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'));

คุณกำลังให้ชื่อของโฟลเดอร์จริงๆนั่นคือรูปแบบไม่ใช่ suburl ของคุณ

ฉันค้นหาไฟล์ css ของฉันและเพิ่มเส้นทางลงไป:

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

ดูเหมือนว่าจะทำงานแล้ว

นอกเหนือจากด้านบนตรวจสอบให้แน่ใจว่าเส้นทางของไฟล์คงที่เริ่มต้นด้วย / (เช่น ... / assets / 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. สร้างโฟลเดอร์ที่มีชื่อ 'สาธารณะ' ใน
   โฟลเดอร์โครงการ 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'))