Express-js不能GET我的静态文件，为什么?

我在我的应用程序中使用引导CSS, JS和字体。我在应用程序的根目录中创建了一个名为asset的文件夹，并将所有这些文件夹放在其中。然后在服务器文件中添加以下一行:

app.use("/asset",express.static("asset"));

这一行使我能够从/asset路径前缀(如:http://localhost:3000/asset/css/bootstrap.min.css)加载asset目录中的文件。

现在在视图中，我可以简单地包括CSS和JS如下:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">

服务静态文件(css，图像，js文件)只需两步:

1. 将CSS文件的目录传递给内置中间件express.static

   var express = require('express');
   var app = express();
   /*public is folder in my project directory contains three folders
   css,image,js
   */
   //css  =>folder contains css file
   //image=>folder contains images
   //js   =>folder contains javascript files
   app.use(express.static( 'public/css'));
   

2. to access css files or images just type in url http://localhost:port/filename.css ex:http://localhost:8081/bootstrap.css

note: to link css files to html just type<link href="file_name.css" rel="stylesheet">

if i write this code

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));

请注意链接css文件与html只需添加下面的行

<link href="css/file_name.css" rel="stylesheet">

这个方法对我很管用

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


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


app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));


app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));


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


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

这对我来说很有用:

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));

如果你的设置

myApp
|
|__ public
|     |
|     |__  stylesheets
|     |     |
|     |     |__ style.css
|     |
|     |___ img
|           |
|           |__ logo.png
|
|__ app.js

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

并引用你的style.css:(在一些.pug文件中):

link(rel='stylesheet', href='/static/stylesheets/style.css')

1. 在Nodejs项目中创建一个名为“public”的文件夹 李文件夹。< / >
2. 将index.html文件放入Nodejs项目文件夹。
3. 将所有脚本和css文件放入公共目录 李文件夹。< / >

4. 使用app.use( express.static('public'));

5. 在index.html中，脚本到<script type="text/javascript" src="/javasrc/example.js"></script>的正确路径

现在一切都好了。

静态目录

检查上面的图像(静态目录)的目录结构

const publicDirectoryPath = path.join(__dirname,'../public')
app.use(express.static(publicDirectoryPath))




//  or


app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))

Webpack让事情变得尴尬

作为对所有其他现有解决方案的补充:

首先:如果你的文件和目录的路径基于cwd(当前工作目录)，事情应该照常工作，因为cwd是你开始node(或npm start， yarn run等)时所在的文件夹。

然而……

如果你正在使用webpack， __dirname行为将非常不同，这取决于你的node.__dirname设置和你的webpack版本:

在Webpack v4中，__dirname的默认行为只是/，如记录在这里。
在这种情况下，你通常想把它添加到你的配置中，使它像v5中的默认值一样，也就是__filename和__dirname现在表现为输出文件的但:

module.exports = {
// ...
node: {
// generate actual output file information
// see: https://webpack.js.org/configuration/node/#node__filename
__dirname: false,
__filename: false,
}
};

• 这也已经讨论过在这里。
1. 在Webpack v5中，根据这里的文档，默认的__filename和__dirname已经作为输出文件的但，从而实现与v4的配置更改相同的结果。

例子

例如，让我们说:

• 你想要添加静态public文件夹
• 它位于你的output文件夹(通常是dist)旁边，并且你在dist中没有子文件夹，它可能看起来像这样

const ServerRoot = path.resolve(__dirname /** dist */, '..');
// ...
app.use(express.static(path.join(ServerRoot, 'public'))

(重要的是:，这是独立于你的源文件在哪里，只看你的输出文件在哪里!)

更高级的Webpack场景

如果在不同的输出目录中有多个入口点，事情会变得更复杂，因为相同文件的__dirname对于输出文件(即entry中的每个文件)可能是不同的，这取决于这个源文件合并到的输出文件的位置，更糟糕的是，相同的源文件可能合并到多个不同的输出文件中。

你可能想要避免这种场景，或者，如果你不能避免它，使用Webpack来管理和注入正确的路径，可能是通过DefinePlugin或EnvironmentPlugin。

我只是尝试这个代码和工作

const exp = require('express');
const app = exp();


app.use(exp.static("public"));

和工作,

工作前(未工作):

const express = require('express');
const app = express();
app.use(express.static("public"));

试试

app.use(express.static(process.cwd() + '/public'));

在你的项目中:

link rel="stylesheet" href="/styles/default.css"

看:process.cwd() vs __dirname的区别是什么?

有时我们会丢失正在使用的目录，最好避免假设文件位于我们指定的位置。

类似地，避免假设在依赖关系的深度中，路径在每个级别上都以相同的方式解释。

我在用

app.use(express.static('public'))

当公共文件夹中没有名为index.html的文件时。

我在浏览器中得到以下错误:

“;不能得到/"

当我将文件重命名为“index.html”时，它可以正常工作。

在你的nodejs文件中

const express = require('express');
const app = express();


app.use('/static', express.static('path_to_static_folder'));

你的哈巴狗档案里

...
script(type="text/javascript", src="static/your_javascript_filename")
...

注意“静态”;词。nodejs文件和pug文件必须相同。

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