尽管使用 express.static，css 仍未加载节点 JS 服务器

Question

这太荒谬了，但我在一个非常无意义的代码情况下被困了好几天。

我无法将 css 图像加载到我的 nodejs 服务器上。

我尝试了很多方法（express.static 等），但似乎没有任何效果。

你能帮帮我吗？

app.js

const express = require('express')
const app = express()
const port = 3000
app.listen(port, () => {
    console.log(`app running on port ${port}`)
})

app.use((req, res, next) => {
    res.sendFile(__dirname + "/index.html");
})

Index.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.0">
    <meta name="description" content="Découvrez ma newsletter pour acquérir les bases du marketing digital et du growth. Zennit est une agence Growth spécialisée en scraping et génération de leads.">
    <title>Agence Growth - spécialité scraping et leads generation</title>
    <link rel="icon" type="image/png" href="assets/images/favicon.png" />
    <link rel="stylesheet" href="./assets/css/web_version.css">
    <link rel="stylesheet" href="./assets/css/mobile_version.css">
    <link rel="stylesheet" href="./assets/css/tablet_version.css">
</head>

文件结构

感谢您的帮助:)

Answer 1

要将 assets 目录作为 /assets 静态服务器，您需要这样的东西

app.use("/assets", express.static(__dirname + "/assets");

这意味着对 /assets/* 的任何请求都将从您的 assets 目录提供静态文件，例如

<link rel="stylesheet" href="/assets/css/web_version.css" />
<img src="/assets/images/some-image.png" />
<script src="/assets/js/some-frontend-script.js"></script>

您还为每个请求提供服务 index.html。将其更改为以下内容以仅为 GET / 或 GET /index.html

提供服务

app.get(["/", "/index.html"], (req, res) => {
  res.sendFile(__dirname + "/index.html");
})

我建议将所有静态文件（包括 index.html）保存在一个目录中以便静态提供服务。例如，使用此目录结构

app/
├─ public/
│  ├─ assets/
│  │  ├─ css/
│  │  ├─ js/
│  │  ├─ images/
│  ├─ index.html
├─ app.js
├─ package.json

您只需要

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

根本不需要res.sendFile()。

尽管使用 express.static，css 仍未加载节点 JS 服务器

css doesn't load with node JS server despite using express.static

css

node.js

express

static-files