指向由Node.js服務的HTML頁面中的靜態資源的鏈接不起作用

Question

我在nodejs項目中有這樣的目錄結構

這是帶有CSS鏈接的我的login_nimda.html代碼段：

我正在從nimda.js提供login_nimda.html ， nimda.js加載關聯的CSS文件。

如您所見，我使用了根相對路徑，但仍然沒有得到任何結果。 我必須將CDN用於Bootstrap卻無法使用下載文件的相同原因。

應該怎么樣 鏈接的href屬性哪里出問題了？

編輯：這是我的nimda.js代碼段，正在提供HTML文件login_nidma.html

router.get('/', function( req, res){
    let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html'));
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(html);
});

Answer 1

您還需要提供靜態文件（例如.css文件）。

您可以使用Express的內置中間件來提供靜態文件express.static() 。

這是基本示例：

// serve static files in "app/static" with your node.js server
app.use('/static', express.static('app/static'))

現在，您可以從/static在瀏覽器中（以及HTML文件中）訪問它們：

<link href="/static/css/login_nimda.css" rel="stylesheet"> 

請在此處閱讀有關express.static()及其用法的更多信息： http : //expressjs.com/en/starter/static-files.html

Answer 2

1. 使用express.static中間件代替以下內容提供靜態文件：

    router.get('/', function( req, res){ let html = fs.readFileSync(path.join(__dirname,'../static/login_nimda.html')); res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); }); 

   https://expressjs.com/en/starter/static-files.html
   
   不要忘記，您可以使用path模塊和__dirname變量（請參見此SO問題 ）來幫助告訴express.static(...)確切的靜態文件在哪里。

2. 如果要在不同文件app.use(express.static(...))乘以倍數，則需要確保將中間件應用於同一app實例。 我創建了一個代碼示例進行說明。 在server.js＃L10中 ，我將var app傳遞到routes.js模塊（與您的nimda.js等效）。 在routes.js＃L4中 ，我在與在server.js創建的var app相同的var app上調用.use() 。 在重構版本中，您在server.js和nimda.js中都使用app.use(express.static(...)) ，我猜測您正在創建一個新的var app = express()在每個文件中（這是我們要避免的事情）。

3. 我不建議您將靜態資產分成如圖所示的兩個不同位置，除非您有充分的理由這樣做。 將它們放在一個中央位置可以確保我們甚至不需要單獨的routes.js （aka nimda.js ）文件來滿足當前所需的功能，從而幫助您減少應用程序的復雜性。

Answer 3

如果使用Express，則根本不需要處理對靜態內容的請求。 Express會自動返回您的靜態信息。 只需使用路由器和文件夾結構的路徑即可。 如

app.use（'/ my_statics'，express.static（__ dirname +“ / public”））;

如果您在下面的/public/assets/css/a.css中有a.css

http://example.com/my_statics/assets/css/a.css

如果您在以下/public/assets/b.html擁有b.html，

http://example.com/my_statics/assets/b.html

編輯：我為我的sideproject DataEndpoints建立了一個類似的設置。 檢查app.js的靜態設置和路由器設置。 還要檢查路由器文件夾以查看如何處理，您可能想在views文件夾下查看如何設置靜態文件鏈接