Nodejs Express - 为什么不提供我的静态文件？答案

【问题标题】：Nodejs Express - Why won't my static file be served?Nodejs Express - 为什么不提供我的静态文件？
【发布时间】：2017-03-19 20:29:49
【问题描述】：

我一直在寻找各种帖子，但无法理解我的错误。无论我做什么，我的 css 文件都没有被提供。有人知道为什么吗？

测试/服务器/app.js：

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

            app.use(express.static(path.join(__dirname, 'public')));
            app.use(express.static(path.join(__dirname, 'browser')));
            var PORT = process.env.PORT || 1337;
            app.listen(PORT, function() {
                console.log('Server is listening!');
            });

测试/浏览器/index.html：

            <head>
                <base href="/" />
                <title>Test</title>
                <link rel="stylesheet" type="text/css" href="public/style.css" />
                <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

                <script src="app.js"></script>
                <script src="js/app.controller.js"></script>
            </head>

            <body>
                <p>hello world</p>

            </body>
            </html>

我的 css 文件在 test/public/style.css 中

【问题讨论】：

你试过 href="../public/style.css" 吗？

标签： node.js express routing

【解决方案1】：

您的应用代码可以在test/server/ 中找到，这意味着path.join(__dirname, 'public') 将产生（绝对路径值）test/server/public，这不是您的 CSS 文件所在的位置。

相反，你想使用这个：

path.join(__dirname, '..', 'public')`

这将使它指向test/public/。

但是，这只是部分解决了问题，因为您还告诉 Express test/public/ 是静态资源的根目录，这意味着您的样式表的 URL 是 /style.css，而不是 public/style.css。

如果你想保留public 前缀（你可能会这样做），你需要使用这个：

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

在你的 HTML 中，一定要使用绝对路径：

<link rel="stylesheet" type="text/css" href="/public/style.css" />

【讨论】：

谢谢。不幸的是，它仍然不起作用。我将其更改为 path.join(__dirname, '..', 'public')` 和。当那不起作用时，我使用了 app.use('/public', express.static(path.join(__dirname, '..', 'public')));再次没有任何效果
其实我现在可以工作了。我不知道为什么，但我不得不退出并重新开始运行服务器..然后它才显示更改
@javascript2016 嗯，是的，Node 应用程序通常是这样工作的：更改代码时，需要重新启动应用程序。
其实我没有。到目前为止，我无需重新启动即可进行更新，这就是为什么感到困惑
@javascript2016 客户端更改（如更改 CSS 中的值）只需要重新加载浏览器，但服务器端更改（如此处建议的更改）需要重新启动应用程序。