在 Node.js 中包含 CSS 和 JS 文件

Question

我正在學習如何使用 Node.js，但我被卡住了。 我無法在我的項目中加載 css 和 js 文件。 我正在從 CDN 加載 Bootstrap 和 Fontawesome，它們渲染得很好。 至於我自己自定義的 css 和 js，它們根本沒有加載。

我的文件夾文件路徑：

文件夾
索引.html
應用程序.js
包.json
css
主文件
檔案
文件.pdf

應用程序.js：

 var http = require('http');
     var fs = require('fs');

 //creating server
 http.createServer(function (req, res) {
   fs.readFile('index.html', function (err, html) {
     res.writeHead(200, { 'Content-Type': 'text/html' });
     res.write(html);
     res.end();

   });
 }).listen(8080);

Answer 1

我建議您創建一個公共目錄，您應該在其中保留所有 javascript、CSS、圖像等。

現在在 app.js 文件中，您可以添加此代碼以使所有這些文件在您的 node.js 項目中的任何位置可用。

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

不要忘記在標題中包含路徑和表達，如下所示：

var express = require('express');
var path = require('path');

現在您可以像這樣在任何地方使用您的 CSS/JS 文件。

<link rel='stylesheet' href='/style.css' />

這里 style.css 是您的自定義 CSS 文件。 希望這種方式對你有用。

謝謝！

Answer 2

如果您的資產目錄（css，js，fonts 目錄）在根目錄下，如下所示

然后使用此代碼

在app.js 中

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

並在.html文件中像這樣導入 css

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

如果您的資產在另一個這樣的父文件夾下

public/assets/css/style.css

然后只需將/替換為public/assets文件夾，如下所示

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

並且<link>標簽將保持不變

Answer 3

有多種軟件包可用於簡化處理和創建服務器。 像Express ， Connect等。

但是，如果您更喜歡普通的 node.js，我建議您查看以下鏈接。

https://gist.github.com/ryanflorence/701407

http://www.tutorialsteacher.com/nodejs/serving-static-files-in-nodejs

總結一下：

var express = require('express');
var app = express();

//setting middleware
app.use(express.static(__dirname + 'public')); //Serves resources from public folder