express.static 文件不加載 static 文件

Question

我正在嘗試使用 express 服務器 static 文件，但它們不起作用，我認為它有 express 問題或其他問題，但我不明白為什么它不起作用。 我的文件夾如下所示：

app.js public --css --js --images

和我試圖像這樣運行的代碼：

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

如果我執行路徑的 console.log

console.log(path.join(__dirname, 'public'))

我得到下一條路徑 C:\Users\J\Desktop\node.js\social-media-cars\public

如果我使用 windows 文件資源管理器查看路徑，我會發現路徑是正確的並且我會看到里面的內容，所以我不認為它的路徑錯誤

我也試過：

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

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

並且不工作，總是一樣的事情：

我對此很失望，我不知道為什么這不起作用。

我使用它的代碼如下所示：

// Import the express module
const path = require('path');
const express = require("express");
// Instantiate an Express application
const app = express();
const dotenv = require("dotenv").config();
const ActionsRouter = require('./routers/actions-router');
const UserRouter = require('./routers/user-router');
const cookieparser = require('cookie-parser');

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

//set static files that are rendered after
app.use(express.static(path.join(__dirname,'public')));

//read the cookies from response
app.use(cookieparser(path.join(__dirname, '/public')));

console.log(path.join(__dirname, 'public'))
//create the req.body 
app.use(express.json());

//user
app.use("/api",UserRouter);
app.use("/useractions",ActionsRouter);


module.exports = app; 

const server = app.listen(port,()=>{
    console.log(`listening on port ${port}`)});

得到 static 文件以及我得到的每個響應

我也收到這個錯誤

Answer 1

1.在你設置view engine上面的index.js或者app.js中添加這個中間件

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

2. 文件夾結構

|__public/   
    |__ css/
        |__ css files...
    |__ js/
        |__ js files...

3.這樣導入

現在您將路徑設置為公共目錄，您必須在導入時提供路徑公共文件夾

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

以同樣的方式，你可以導入你的JS文件

您現在應該已全部設置為可以訪問 CSS 或 js 以及公共目錄中的任何文件

Answer 2

好吧，我找到了，我迷路了，因為當我試圖在瀏覽器上查看我在每個響應中獲得的文件時，我沒有得到任何文件，但只有當我鏈接 css 和 html 時，它才會下載 static 文件，我知道為什么這是這樣工作的，我想每個 /public 文件都附加到你是否使用它的響應

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

無論如何，如果有辦法獲取您請求的文件，我想知道