Node.js部署后CSS未应用到HTML页面的问题排查求助

你的问题核心是静态资源路径映射配置与HTML中CSS引用路径不匹配，导致浏览器无法正确加载样式文件。

问题拆解 #

1. 你在server.js中分别将../assets/bootstrap/css/和../assets/css/设为静态目录，这意味着浏览器只能通过http://localhost:3000/文件名的形式访问这些目录下的文件，但HTML里的引用路径是../assets/...，请求URL会变成http://localhost:3000/assets/...，服务器没有对应此路径的静态映射，因此返回404错误。
2. 页面通过根路径/访问时，浏览器解析../assets会出现路径逻辑错误（根目录的../仍指向根），进一步加剧加载失败问题。

解决方案 #

1. 修改server.js的静态目录配置

将整个assets目录设为静态资源根，替换原来的两个express.static配置：

const express = require('express')
const app = express()
const hostname = "localhost"
const cors = require('cors')
const path = require('path')
const ytdl = require('ytdl-core')
const port = 3000

// 仅保留这一行，将整个assets目录设为静态资源
app.use(express.static(path.join(__dirname, '/../assets/')));

app.get('/', (req, res) => {
  res.sendFile('index.html', {'root': __dirname + '/../html/'})
});

app.get('/download', (req,res) => {
  var URL = req.query.URL;
  res.json({url: URL});
});

app.listen(port, () => {
  console.log(`Example app listening at http://${hostname}:${port}`)
});

2. 修正HTML中的CSS引用路径

使用**绝对路径（以/开头）**指向assets目录，避免相对路径解析错误：

<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Home - Zeit Video Editor</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/Raleway.css">
    <link rel="stylesheet" type="text/css" href="/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/bs-theme-overrides.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/untitled.css">
</head>

验证方法 #

打开浏览器开发者工具（F12），切换到Network标签，刷新页面后查看CSS文件的请求状态：

• 状态码为200：说明样式加载成功
• 状态码为404：检查路径是否与本地文件结构完全对应

内容的提问来源于stack exchange，提问作者Zanchet2020