使用 node express 提供静态文件时，正确的脚本路径是什么？答案

【问题标题】：What is the correct script path when serving static files with node express?使用 node express 提供静态文件时，正确的脚本路径是什么？
【发布时间】：2017-07-12 19:11:56
【问题描述】：

我总是在为脚本找到正确的路径时遇到问题，这一定是因为我提供静态文件的方式是正确的，因为我的路径是正确的。在我的代码中，我试图包含物化框架，但没有找到它，我不明白为什么。我在 /browser 中提供我的文件

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

来自 browser/index.html 我使用（我相信）正确的路径，但它不起作用。任何帮助都会很棒，所以我不会继续犯同样的错误！非常感谢！

航班/服务器/app.js

    var express = require('express');
    var path = require('path');
    var morgan = require('morgan');
    var bodyParser = require('body-parser');

    var app = express();
    module.exports = app;
    app.use(morgan('dev'));


    app.use(express.static(path.join(__dirname, '../browser')));
    app.use(bodyParser.urlencoded({
        extended: false
    }));
    app.use(bodyParser.json());

    var PORT = process.env.PORT || 1337;
    app.listen(PORT, function() {
        console.log('Server is listening on port 1337!');
    });

航班/浏览器/index.html

<!DOCTYPE html>
    <html>
    <head>
        <title>Title of the document</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link type="text/css" rel="stylesheet" href="../materialize/css/materialize.min.css" media="screen,projection" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="../materialize/js/materialize.min.js"></script>
        <script src="flight.js"></script>
    </head>

    <body>
        The content of the document......
    </body>
    </html>

我的结构：

flights
   browser
      index.html
      flights.js
   server
      app.js
   css
     style.css
   materialize
      css
         materialize.min.css
      fonts
      js
         materialize.min.js

【问题讨论】：

标签： node.js express filepath static-files

【解决方案1】：

首先要了解的是，您需要将所有静态文件（如 css、js）放在一个文件夹中，该文件夹可以分别包含 css 和 js 以及其他内容的子文件夹。

你的结构应该是一个单独的文件夹，比如你的根项目目录中的 public，然后在该 public 文件夹中放置 css、js 和其他东西的文件夹。

还有这一行

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

并不完全正确。使用类似的东西

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

public 是包含所有静态文件的文件夹

现在假设您在包含一些 materialise.css 文件的 css 文件夹中放置了一个 materialize 文件夹，那么 URL 将类似于 http://localhost:3000/css/materialize/materialise.css

也可以查看express static files

【讨论】：

谢谢！因此，当我将物化文件夹放入公用文件夹并提供公用文件夹中的所有文件时，会找到物化。但我尝试了解路径，因为我不想将所有文件放入同一个文件夹中。我将我的 js 文件洞察力留在了浏览器文件夹中。我现在提供来自公共文件夹和浏览器的所有文件（添加 app.use(express.static('browser')) ）然后洞察我的航班/公共/索引.html 文件我有我的 js 文件的路径：'.. /browser/flights.js'。它不起作用。你能解释一下为什么吗？路径是正确的+我在浏览器文件夹中提供文件。谢谢！！
静态文件不会像您通常在 html CSS 项目中那样被引用。当你使用 express.static('browser') 时，它会将此文件夹设置为根路径，如果你想访问像 browser/index.js 这样的文件，那么它只是localhost:3000/index.js，如果你想给出路径，如上所述静态文件只需输入路径index.js，它将转换为localhost:3000/index.js
我不确定我是否理解正确。如果我从浏览器提供我的文件，那么让我们说 index.js（来自 public/index.html）的路径不会是 browser/index.js，而只有 index.js，因为我提供所有文件洞察浏览器。那是对的吗？另外，如何从我的 index.html 文件中“访问”其他文件？例如，如果我 npm install modules，我必须从我的 index.html 访问它们。我是否还必须在我的 server/app.js 文件中提供所有节点模块，或者我不能提供它们并仍然从 index.html 访问它们？非常感谢您的回答和帮助！
在 express.static 中，您放置的任何路径都将充当 root，之后您必须访问与 root 相关的所有其他内容。假设您在 express.static 中放置了一个名为 X 的目录，因此 X 将充当根目录。然后，无论 X 内部是什么，您都可以给出它的相对路径。所以在本地系统上X/index.html 将被引用为 localhost:3000/index.html 但X/somefolder/index.html 将被引用为 localhost:3000/somefolder/index.html。节点模块没有什么特别之处，您可以按照上述评论中的说明引用它们。
那么我首先必须添加 app.use(express.static('node_modules')) 因为它们不在我的公共文件夹中，而是在航班/节点模块中。然后从位于 flight/public/index.html 中的 index.html 开始（让我们说 jQuery）'jquery/dist/jquery.min.js' =相对路径？我尝试过的所有其他路径组合都不起作用。