Question

我正在设置快递应用，并使用

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

提供我的静态文件。但我不清楚这里到底发生了什么。我认为这指向/对/public/views目录的任何请求，这是我存储index.html文件的位置。它确实如此，因为它加载了我的索引页面。但是，在我的index.html文件中，我试图从/public/lib中提取资源并且这些调用失败。

以下是我的应用的相关结构

public/
    css/styles.css
    lib/'stuff im trying to get'
    views/index.html

从index.html中我正在尝试这个：

<link href="../css/styles.css">
<script src="../lib/path/to/resource">

所以，正如你所看到的，我尝试做的事情是从我的视图文件夹中跳出来，跳进我的css和lib文件夹，然后拉入资源。经过一段时间的讨论后，我进入了server.js，并将静态路径更改为__dirname + '/public'，它没有任何帮助，直到我将index.html文件移动到public的根目录。这提供了一切美好和正确，这让我有点困惑，因为我的脚本仍然有前面的../，这在技术上应该让我跳出公共文件夹并进入我的应用程序的根目录。那么，只是为了踢，我将我的../改为普通的旧./，一切都还好。

如果有人有一些时间，请你介意向我解释我失踪了什么。我似乎无法想出一个可以说明一切的解释。

Answer 1

Express服务于您的网络服务器根目录中的静态内容目录，因此'/ public / views'在服务器上显示为'/'。引用的资源使用Web路径，而不是文件系统路径，因此您对“../lib/”的引用无法在“/”目录下方。

当你将'/ public'设为web根目录时，可以通过网络访问css / js文件，一切都开始工作了。

Answer 2

请勿使用../lib/relative.css或lib/relative.css等相对网址导致意外行为，例如

如果您使用localhost/home/index.html之类的嵌套路线，则lib/relative.css之类的相对网址会生成localhost/home/lib/relative.css。

使用绝对网址，从/lib/absolute.css或/../lib/absolute.css这样的斜杠开始，导致始终从域的基础返回资源。

因此，在嵌套路线localhost/home/index.html中，绝对网址/lib/absolute.css将导致localhost/lib/absolute.css

这对于提供诸如index.html之类的静态页面可能不是问题，因为在嵌套路由中你不会有index.html，但它是SPA的考虑因素。

Answer 3

在这种情况下

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

当向＆＃39; /＆＃39;发出请求时，您的index.html会被投放。

当浏览器解析来自＆＃39; /＆＃39;它尝试解析HTML文档中的相对URL。但由于HTML是由＆＃39; /＆＃39;提供的。浏览器不知道如何处理以＆＃39; ...开头的网址，因此忽略了＆＃39; ..＆＃39;。所以浏览器会向＆＃34; /css/styles.css"提出请求;而不是＆＃34; ../ css / styles.css＆＃34;。这转换为＆＃34; __ dirname / public / views / css / styles.css＆＃34;在服务器上，它不存在并返回404。

当你改为

时

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

并将index.html放入＆＃34; / public＆＃34;那么＆＃39; ..＆＃39;您的链接仍会被浏览器忽略。但现在＆＃34; /css/styles.css"实际上可以在服务器端解决，因为＆＃34; /public/css/styles.css"确实存在。

因此，在这个原因中，浏览器是混淆的起源（一如既往）。

index.html没有吸引资源

3 个答案: