Node.js的 为什么页面无法加载CSS和JavaScript文件?
我已经创build了一个node.js服务器。 当我使用端口3000进入本地主机,它只显示文本没有CSS或JavaScript。 我已经尝试了几个解决scheme,在其他人的工作。 但他们没有为我工作。
节点JS继续无法加载资源错误消息
静态文件与express.js
无法获取CSS文件
我的文件顺序是这样的
server.js index.html public css style.css
这是服务器的代码
var express = require('express'); var app = express(); app.get('/', function(req, res) { res.sendFile(__dirname + '/index.html');}); app.use(express.static(__dirname + 'public')); app.listen(3000);
这些是错误
GET http://localhost:3000/ [HTTP/1.1 304 Not Modified 11ms] GET http://localhost:3000/public/css/demo.css [HTTP/1.1 404 Not Found 10ms] GET http://localhost:3000/public/css/themes/popclip.css [HTTP/1.1 404 Not Found 10ms] GET http://localhost:3000/public/css/reveal.min.css [HTTP/1.1 404 Not Found 19ms] GET http://localhost:3000/public/css/theme/default.css [HTTP/1.1 404 Not Found 12ms] GET http://localhost:3000/public/css/jquery.dropdown.css [HTTP/1.1 404 Not Found 11ms] GET http://localhost:3000/node_modules/socket.io/node_modules/socket.io-client/socket.io.js [HTTP/1.1 404 Not Found 10ms] GET http://localhost:3000/public/js/jquery.min.js [HTTP/1.1 404 Not Found 29ms] GET http://localhost:3000/public/js/jquery.popline.js [HTTP/1.1 404 Not Found 28ms] GET http://localhost:3000/public/js/plugins/jquery.popline.link.js [HTTP/1.1 404 Not Found 28ms]
这个:
__dirname + 'public'
应该:
__dirname + '/public'
此外,它看起来像你的HTML / CSS的path可能不正确,因为__dirname + '/public'
将是你的根 。 所以,除非你有一个目录__dirname + '/public/public'
你将不得不改变你的HTML / CSS的path。
问题解决了。
问题出在我的index.html文件中。 最初我以为,当我创build一个新的文件夹,并把所有的CSS和JS文件在那里,我需要在所有的src中添加“公共”。 喜欢这个
<script src="public/js/jquery.min.js"></script> <script src="public/js/jquery.popline.js"></script>
但相反,我只需要做到这一点,没有像这样的“公共”文件夹
<script src="js/jquery.min.js"></script> <script src="js/jquery.popline.js"></script>
并将__dirname + 'public'
到__dirname + '/public'
如build议的mscdex) 。
尝试了几个项目后,我只想列出我的工作成果,以防其他人帮助。
我尝试过的代码行,但没有为我工作:
app.use('/css', express.static(__dirname + '/public')); app.use(express.static(__dirname + '/public')); app.use(express.static(path.join(__dirname, '../public')));
我的项目是在“项目”文件夹,其中包含“公共”文件夹,“视图”文件夹和server.js文件。 节点,Express和Handlebars被用来渲染页面。 在“公共”是一个文件夹“CSS”,我的style.css文件被保存。
在server.js我使用
var express = require('express'); var app = express(); app.use(express.static('public'));
在我的main.handlebars文件中的“视图”>“布局”,我在该部分
<link rel="stylesheet" href="/css/style.css">
有了这些,启动一个本地实例工作,加载样式表时没有“404”错误消息。