在Node.js中引入CSS和JS文件

Question

我正在学习如何使用Node.js，但目前遇到了问题。我无法在项目中加载css和js文件。我正在从CDN加载Bootstrap和Fontawesome，它们都能成功渲染。但是我的自定义css和js则一直无法加载。

我的文件夹路径如下：

folder
index.html
app.js
package.json
css
main.css
files
file.pdf

app.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);

- user7438259

---

你可能想要考虑使用 Express.js。它可以轻松地提供静态文件和使用 Node.js 进行自定义服务器端代码。https://expressjs.com/en/starter/static-files.html - jrasm91

如果你想在客户端使用Node.js与CSS和JS，我建议使用Angular，因为在我看来这样做会更容易。你想要提供的任何内容都可以简单地包含在应用程序文件夹中。尝试这个 sudo npm install -g @angular/cli 然后创建一个新文件夹并输入 ng new myApp && cd myApp && ng-serve -o。现在找到你的 src/app/index.html 文件并开始编写吧！ - Hunter Frazier

Answer 1

我建议你创建一个公共目录，将所有的javascript、CSS、图像等文件放在里面。

现在，在app.js文件中，你可以添加以下代码，使得这些文件可以在你的node.js项目的任何地方使用。

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

不要忘记在头文件中包含路径和express，就像这样：

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

现在你可以像这样随处使用你的CSS/JS文件。

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

这里的style.css是您自定义的CSS文件。希望这种方法对您有效。祝您一切顺利！

HTH感谢！

- Lalit Dashora

Answer 2

如果你的资源目录(css、js、字体文件目录)在根目录下，如下所示： 那么请在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> 标签将保持不变

- Krishna Jangid

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

- Sagar

Answer 4

这可能听起来不切实际，但在没有使用express.js的情况下实现这一点的一种方法是创建专用于为html模板中的每个src或href属性提供所需数据的不同服务器端口，即为每个数据请求创建一个新的http服务器，并且每个服务器运行在唯一的端口上，然后将适当端口的绝对uri设置为每个src或href属性，每个端口从不同的文件中读取和提供数据。我认为这是express.js的工作类比。

app.use(express.static(__dirname + 'public'));

- MasterpieceKODZ