无法加载资源:服务器响应状态为404(未找到)css [英] Failed to load resource: the server responded with a status of 404 (Not Found) css

查看:111
本文介绍了无法加载资源:服务器响应状态为404(未找到)css的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在让浏览器显示正在创建的应用程序的CSS时遇到麻烦.我已经看过其他用户提出的相同问题,但没有找到任何对我的情况有所帮助的答案.当我转到页面时,即使链接了样式表,显示的所有内容都是没有样式的"Hello world".当我检查页面时,出现错误:

I'm having trouble getting my browser to display the css for the app I am creating. I have looked at the same question asked by other users but have not found any of the answers to help in my situation. When I goto the page, all that is displayed is "Hello world" with no styling even though the stylesheet is linked. When I inspect the page, I get the error:

无法加载资源:服务器的响应状态为404(未找到)

Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的应用程序的结构

here's the structure of my application

.
./public 
     /css
       /main.css
./routes
     /index.js
./views
     /index.html
./server.js

server.js:

server.js:

const express = require('express');
const app = express();
const port = process.env.PORT || 8080;

app.use(express.static(__dirname + '/public')); 
const router = require('./routes/index.js');
app.use('/',router);

app.listen(port);

console.log('connected to port: ' + port);

index.html

index.html

<!DOCTYPE html>
<html>
<head>
<link href="../public/css/main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>
 <body>
    <p>Hello World!</p>
 </body>

index.js

var express = require('express');
var path = require('path');
var router = express.Router();
module.exports = router;

router.get('/', function(req,res){
res.sendFile(path.join(__dirname,'../views/index.html'));
});

推荐答案

您已在应用程序root/public中定义了公共目录

you have defined the public dir in app root/public

app.use(express.static(__dirname + '/public')); 

所以您必须使用:

./css/main.css

这篇关于无法加载资源:服务器响应状态为404(未找到)css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆