在 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')));
<link>
标签将保持不变
【讨论】:
【参考方案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
【讨论】:
以上是关于在 Node.js 中包含 CSS 和 JS 文件的主要内容,如果未能解决你的问题,请参考以下文章
无法使用 Node Js App 在句柄栏模板中包含 CSS 样式