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

Posted

技术标签:

【中文标题】在 Node.js 中包含 CSS 和 JS 文件【英文标题】:Include CSS and JS files in Node.js 【发布时间】:2018-10-30 15:31:48 【问题描述】:

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

我的文件夹文件路径:

文件夹 index.html 应用程序.js 包.json CSS main.css 文件 文件.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);

【问题讨论】:

您可能需要考虑使用 expressjs。它使得提供静态文件和使用 nodejs 自定义服务器端代码变得非常容易。 expressjs.com/en/starter/static-files.html 如果您希望在客户端使用带有 CSS 和 JS 的 Node.js,我建议您使用 Angular,在我看来这样的事情会变得更容易。您想要提供的任何内容都可以简单地包含在您的应用程序文件夹中。试试这个 sudo npm install -g @angular/cli 然后创建一个新文件夹并输入 ng new myApp && cd myApp && ng-serve -o。现在找到您的 src/app/index.html 文件并破解! 【参考方案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 文件。希望这种方式适合您。

谢谢!

【讨论】:

【参考方案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')));

&lt;link&gt; 标签将保持不变

【讨论】:

【参考方案3】:

有多种软件包可用于轻松处理和创建服务器。 比如ExpressConnect等。

但如果您更喜欢纯 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

【讨论】:

以上是关于在 Node.js 中包含 CSS 和 JS 文件的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 Node Js App 在句柄栏模板中包含 CSS 样式

直接在 node.js 中包含文件

使用 Browserify 在 Node JS 项目中包含 JQuery Mobile

在客户端 Node.js 中包含 JQuery

如何在 node.js 中包含默认模型作为参考名称?

在一行中包含所有功能的 module.exports