我已经将我的代码简化为我可以做的最简单的express-js应用程序:
var express = require("express"),
app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);
我的目录是这样的:
static_file.js
/styles
default.css
然而，当我访问http://localhost:3001/styles/default.css时，我得到以下错误:
Cannot GET / styles /
default.css
我使用express 2.3.3和节点0.4.7。我做错了什么?
当前回答
试试http://localhost: 3001 / default。
要在请求URL中使用/styles，请使用:
app.use("/styles", express.static(__dirname + '/styles'));
请看本页上的例子:
//Serve static content for the app from the "public" directory in the application directory.
// GET /style.css etc
app.use(express.static(__dirname + '/public'));
// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".
// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));
其他回答
试一试”。而不是__dirname + '/public'。 类似地，尝试process.cwd() + '/public'。
有时我们会丢失正在使用的目录，最好避免假设文件位于我们指定的位置。
类似地，避免假设在依赖关系的深度中，路径在每个级别上都以相同的方式解释。
我在我的应用程序中使用引导CSS, JS和字体。我在应用程序的根目录中创建了一个名为asset的文件夹，并将所有这些文件夹放在其中。然后在服务器文件中添加以下一行:
app.use("/asset",express.static("asset"));
这一行使我能够从/asset路径前缀(例如:http://localhost:3000/asset/css/bootstrap.min.css)加载资产目录中的文件。
现在在视图中，我可以简单地包括CSS和JS如下:
<link href="/asset/css/bootstrap.min.css" rel="stylesheet">
app.use(express.static(__dirname+'/'));
这为我工作，我尝试使用公共目录，但它不工作。 但在这种情况下，我们提供了访问目录中的整个静态文件，希望对您有所帮助!
Webpack让事情变得尴尬
作为对所有其他现有解决方案的补充:
首先:如果你将文件和目录的路径建立在cwd(当前工作目录)上，事情应该照常工作，因为cwd是你启动node(或npm start, yarn run等)时所在的文件夹。
然而……
如果你正在使用webpack， __dirname行为将非常不同，这取决于你的节点。__dirname设置和你的webpack版本:
In Webpack v4, the default behavior for __dirname is just /, as documented here. In this case, you usually want to add this to your config which makes it act like the default in v5, that is __filename and __dirname now behave as-is but for the output file: module.exports = { // ... node: { // generate actual output file information // see: https://webpack.js.org/configuration/node/#node__filename __dirname: false, __filename: false, } }; This has also been discussed here. In Webpack v5, per the documentation here, the default is already for __filename and __dirname to behave as-is but for the output file, thereby achieving the same result as the config change for v4.
例子
例如，让我们说:
需要添加静态公用文件夹 它位于你的输出文件夹(通常是dist)旁边，在dist文件夹中没有子文件夹，它可能是这样的
const ServerRoot = path.resolve(__dirname /** dist */, '..');
// ...
app.use(express.static(path.join(ServerRoot, 'public'))
(重要的是:再次强调，这是独立于你的源文件在哪里，只看你的输出文件在哪里!)
更高级的Webpack场景
如果在不同的输出目录中有多个入口点，事情会变得更复杂，因为同一文件的__dirname对于输出文件(即条目中的每个文件)可能是不同的，这取决于该源文件合并到的输出文件的位置，更糟糕的是，相同的源文件可能合并到多个不同的输出文件中。
你可能想要避免这种场景，或者，如果你不能避免它，使用Webpack来管理和注入正确的路径，可能是通过DefinePlugin或EnvironmentPlugin。
提供__dirname的问题是__dirname返回当前文件的路径，而不是项目的文件。 此外，如果使用动态头文件，每个页面将在不同的路径中查找静态文件，这将不起作用。 对我来说，最好的方法是用__dirname代替process.cwd()，它总是将路径捐赠给项目文件。
app.use(express.static(process.cwd() + '/public'));
在你的项目中:
link rel="stylesheet" href="/styles/default.css"
参见:process.cwd()与__dirname之间的区别是什么?
