为什么Node.js无法找到我的文件

时间:2017-10-27 02:16:21

标签: javascript node.js express server static

我使用Node.js作为我的服务器,我在提供JS和CSS文件时遇到了一些麻烦。出于某种原因,index.html似乎无法找到它们。当我加载浏览器时,我收到此错误:

enter image description here

我的文件系统结构:

public
    css
        main.css
        normalize.css
    js
        main.js
        upload.js
        plugins.js
views
    index.html
server.js

HTML

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="manifest" href="../public/site.webmanifest">
    <link rel="apple-touch-icon" href="../public/icon.png">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="../public/css/normalize.css">
    <link rel="stylesheet" href="../public/css/main.css">

    <script src="../public/js/vendor/modernizr-3.5.0.min.js"></script>
    <script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <script src="../public/js/plugins.js"></script>
    <script src="../public/js/main.js"></script>
    <script src="../public/js/upload.js"></script>
</head>

server.js

var express = require("express");
var app = express();
var path = require("path");

app.use(express.static(path.join(__dirname, 'public')));

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

我的猜测是我在server.js中错误地提供了公用文件夹。当我尝试直接在浏览器上访问该文件夹时,我得到无法获取/公开。任何专家都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

加载静态资产的方式是错误的。 Express会查找相对于静态目录的文件,因此静态目录的名称不应该是URL的一部分。

如果您使用app.use(express.static(path.join(__dirname, 'public')));,则可以在http://host:port/css/ *或http://host:port/js/ *加载静态资源。

如果您使用app.use('/public', express.static(path.join(__dirname, 'public')));,则可以从/ public路径的公共目录加载静态资源。例如,http://host:port/public/css/ *