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

时间:2018-05-21 01:45:57

标签: html css node.js

我正在学习如何使用Node.js,但我被卡住了。我无法加载CSS  和我的项目中的js文件。我从CDN加载Bootstrap和Fontawesome,它们正在渲染。至于我自己的习俗  css和js,他们根本没有加载。

我的文件夹文件路径:


 index.html的
 app.js
 的package.json
  CSS
 main.css的
  文件
   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);

3 个答案:

答案 0 :(得分:4)

如果您的资产目录(css,js,fonts目录)位于根目录下,例如

enter image description here

然后使用此代码

app.js

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

并在 .html 文件中导入css

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

如果您的资产在另一个这样的父文件夹下

public/assets/css/style.css

然后只需将{strong> / 替换为下面的public/assets文件夹

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

<link>标签将保持不变

答案 1 :(得分:2)

我建议你创建一个公共目录,你应该保留所有的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文件。希望这种方式对你有用。

HTH谢谢!

答案 2 :(得分:0)

有各种软件包可用于简化处理和创建服务器。 与ExpressConnect

相同

但如果您更喜欢普通的node.js,我建议您查看下面的链接。

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

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