Question

我有一个如下的html页面

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Report</title>
<link rel="stylesheet" href="assets/app.css"/></head><body>

//Content//

<div id="report"></div><script src="assets/app.js"></script></body></html>

此html页面位于结构下方的文件夹中

report
   --assets
      --app.js
      --app.css
   --myfile.html

现在我有我的应用程序正在尝试呈现此html。下面位于routes.js中，结构如下

app.use('/Users/report/assets', express.static('/Users/report/assets'));
app.get('/api/testresults/:id', (req, res) => {
    const id = req.params.id;
    res.sendFile('/Users/report/myfile.html');
  });

我的应用程序结构如下

MyApp 
app 
 —routes
    —index.js
    —routes.js
node_modules
package.json
server.js

我应该在这里添加什么。我不想更改html，因为我相信一旦我使用express.static（），它就应该能够找到文件。我不断收到错误app.js not found 404

注意：如果我将html的href更改为

/Users/report/assets/app.js

和css一样，它可以工作，但是我不想要。

Answer 1

如果您希望诸如assets/app.css之类的资源独立于它们来自的页面的URL，以便它们可以存在于文件系统中的任何位置，请停止使用相对URL。使用绝对URL在您的网页中引用它们，例如：

/assets/app.css
/assets/app.js

然后，您可以非常容易地配置一条express.static()路由来处理所有页面。

app.use(express.static("put directory here that contains the assets folder"));

从您的问题中推断出我的意思是

app.use(express.static('/Users/report'));

当Express收到对/assets/app.css的请求时，它将检查express.static()路由处理程序。如果您在assets中为express.static()文件夹指定了父目录，则该路由处理程序将在/assets/app.css的目录中查找您想要的。

因此，在上面的示例中，它将接受对/assets/app.css的请求，并将其与express.static('/Users/report')中指定的路径组合起来，然后查找：

/Users/report/assets/app.css

您想要的是什么。

当您在HTML文件中的资源上使用的路径不是以http://或/开头时，浏览器会认为该路径是相对于页面URL的，因此浏览器会使用网页的路径，并将其放在HTML中指定的URL之前。这确实使静态资源变得复杂，因此通常不是您想要的。相反，您想通过确保它们以/开头来使其成为绝对路径。然后，它们很容易设置路由，因为无论包含它们的页面的路径是什么，路由都将是相同的。

Answer 2

您仍在尝试使用/Users/report/assets引用html <script src="assets/app.js"></script>中的路径

尝试更改以下代码，

app.use('/Users/report/assets', express.static('/Users/report/assets'));

到

app.use('assets', express.static('/Users/report/assets'));

Answer 3

自从您拥有

app.use('/Users/report/assets', express.static('/Users/report/assets'));

对于app.css，无论哪种方式，都应使用app.js而不是asset / app.js作为路径

ExpressJS用于在GET请求上呈现内容

3 个答案: