Express 服务器不提供来自 Index.html 的静态文件答案

【问题标题】：Express Server not Serving Static Files from Index.htmlExpress 服务器不提供来自 Index.html 的静态文件
【发布时间】：2017-03-31 06:36:38
【问题描述】：

我知道这个问题已经被问过很多次了，但是我已经搜索并尝试了所有方法，但它仍然不起作用。我是节点新手。我的文件目录是这样设置的：

io
-node_modules/
-app/
     --css
     --js
-index.html
-server.js

Server.js：

var express = require('express');
var app = express();
//app.use(express.static(__dirname+'/app/css'));
app.use('/css', express.static(__dirname+'/app/css'));
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];



//set up server
server.listen(process.env.PORT || 3001);
console.log('Server running...');

//create a route
app.get('/',function(req,res){
  res.sendFile(__dirname+'/app/index.html');
});

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>IO Chat</title>
        <meta name="description" content="">
        <meta name="author" content="Lloyd">

        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <link href="css/main.css" rel="sylesheet">
    <link href="css/bootstrap.css" rel="sylesheet">
    <!--link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js"></script>
    </head>

所以我需要知道为什么 index.html 似乎无法引用我的 css 文件。我在app.use() 中尝试了多种可能的组合，但它就是不想工作，即使有时我可以直接从浏览器访问文件。

【问题讨论】：

标签： node.js express path mean-stack

【解决方案1】：

在服务器中：

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

在客户端：

<link href="/main.css" rel="stylesheet">
<link href="/bootstrap.css" rel="stylesheet">

【讨论】：

不，没什么。 Nada :( 请注意，我可以访问 CSS 文件本身，索引文件的行为不正常。所以我想这就是我设置 app.get() 的方式
您始终可以使用绝对路径访问文件，您根本不需要静态服务。顺便说一句，“行为不端”是什么意思，有什么问题？
您确定向我们展示了正确的目录结构吗？您发送__dirname + "/app/index.html" - 可以吗？根据您的信息，我认为应该是__dirname + "/index.html"
是的，我确定。我最近把index.html文件拿出来放到了根目录下。没有。我已经尽力了。行为不正常是指它没有引用 css 文件。
你打错字了 - 应该是 rel="stylesheet" - 你输入的是“sylesheet” ;-)

【解决方案2】：

我认为你使用 app.use 错误

试试这样：

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

这会将对css/... 的调用路由到命名的静态目录。

【讨论】：

我也这么认为。但它仍然无法正常工作。现在它是app.use('/css', express.static(__dirname+'/app/css'));，即使我可以通过访问 localhost:3001/css/main.css 来访问 css 文件，index.html 也不会引用它。这有点令人费解。