javascript 节点.js。为什么页面无法加载css和javascript文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28037145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Node.js. Why is the page cannot load css and javascript file?
提问by Muhamad Syahir Mohd Hashim
i have created a node.js server. When i entered the localhost using port 3000, it displayed text only without css or javascript. I have tried several solutions that have worked on others. but they didn't worked for me.
我创建了一个 node.js 服务器。当我使用端口 3000 输入 localhost 时，它仅显示没有 css 或 javascript 的文本。我尝试了几种对其他人有效的解决方案。但他们没有对我来说有效。
Node JS keep getting Failed to load resource error message
my file order is like this
我的文件顺序是这样的
server.js
index.html
public
css
style.css
This is the code for the server
这是服务器的代码
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);
These are the errors
这些是错误
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]
回答by mscdex
This:
这：
__dirname + 'public'
Should be:
应该：
__dirname + '/public'
Also it looks like your paths in your html/css may not be correct since __dirname + '/public'will be your root. So unless you have a directory __dirname + '/public/public'you will have to change the paths in your html/css.
此外，看起来您在 html/css 中的路径可能不正确，因为__dirname + '/public'将是您的root。所以除非你有一个目录，否则你__dirname + '/public/public'将不得不更改 html/css 中的路径。
回答by Muhamad Syahir Mohd Hashim
Problem solved.
问题解决了。
The problem was in my index.html file. Originally I thought that when i created a new folder and put in all the css and js files there, I needed to add the 'public' in all the src. Like this
问题出在我的 index.html 文件中。最初我认为当我创建一个新文件夹并将所有 css 和 js 文件放在那里时，我需要在所有 src 中添加“public”。像这样
<script src="public/js/jquery.min.js"></script>
<script src="public/js/jquery.popline.js"></script>
But instead, I just have to do it without the 'public' folder like this
但是相反，我只需要在没有像这样的“公共”文件夹的情况下进行
<script src="js/jquery.min.js"></script>
<script src="js/jquery.popline.js"></script>
and add '/' to the __dirname + 'public'to __dirname + '/public'like mscdexsuggested.
并将“/”添加__dirname + 'public'到__dirname + '/public'像mscdex建议的那样。
回答by Micah Grossman
After trying a few items, I just wanted to list my working results in case it helps anyone else.
在尝试了几个项目之后，我只想列出我的工作结果，以防它对其他人有所帮助。
Lines of code I had tried but failed to get working for me:
我尝试过但未能对我来说有效的代码行：
app.use('/css', express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/public'));
app.use(express.static(path.join(__dirname, '../public')));
My project was in folder 'project' which contained 'public' folder, 'views' folder, and server.js file. Node, Express and Handlebars were used to render the pages. In 'public' was a folder 'css' where my style.css file was saved.
我的项目位于文件夹“project”中，其中包含“public”文件夹、“views”文件夹和 server.js 文件。Node、Express 和 Handlebars 用于渲染页面。在“public”中是一个文件夹“css”，我的 style.css 文件保存在其中。
On server.js I used
在我使用的 server.js 上
var express = require('express');
var app = express();
app.use(express.static('public'));
On my main.handlebars file in 'views' > 'layouts' I had in the section
在“视图”>“布局”中的 main.handlebars 文件中
<link rel="stylesheet" href="/css/style.css">
With those in place, starting up a local instance worked and no '404' error message when loading the stylesheet.
有了这些，启动本地实例就可以了，加载样式表时不会出现“404”错误消息。
