Node.js服务器仅渲染HTML、静态资源（CSS/Images/JS）无法加载的解决方案及HTML文件存放位置咨询

先聊聊你遇到的问题，静态资源加载失败主要有几个关键原因，咱们一步步拆解解决：

一、静态资源加载失败的核心问题 #

你现在的代码同时混用了Express中间件和手动创建的HTTP服务器处理路由——这就导致Express配置的express.static静态资源中间件根本没机会生效！因为你手动写的路由逻辑拦截了所有请求，只有/和/docs能返回HTML，其他静态资源请求直接被判定为404。另外，你在HTML里错误引入了后端的server.js，这是后端运行的脚本，完全不能在前端浏览器里加载，这也会导致额外报错。

二、具体解决方案 #

1. 简化服务器代码，用Express直接处理请求 #

没必要手动创建HTTP服务器，Express本身就可以监听端口，还能更好地利用中间件能力。修改你的Node.js代码如下：

const express = require('express')
const bodyParser = require('body-parser');
const path = require('path'); // 引入path模块，避免相对路径出错
const app = express()

// 解析JSON格式请求
app.use(bodyParser.json())

// 配置静态资源：用path.resolve确保路径绝对可靠
app.use("/static", express.static(path.resolve(__dirname, './Frontend/Project/assets')));

// 处理首页路由
app.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, './Frontend/Project/index.html'));
});

// 处理docs页面路由
app.get('/docs', (req, res) => {
  res.sendFile(path.resolve(__dirname, './Frontend/Project/docs.html'));
});

// 处理404请求
app.all('*', (req, res) => {
  res.status(404).send("Oops this doesn't exist - 404");
});

// 启动服务器
app.listen(8000, () => {
  console.log("Server running on http://localhost:8000");
});

2. 修正HTML里的静态资源引用路径 #

因为你设置了/static作为静态资源的访问前缀，所以HTML里引用CSS、JS、图片时，要以/static开头，比如：

• CSS引用：<link rel="stylesheet" href="/static/CSS_folder/your-style.css">
• 前端JS引用：<script src="/static/JS_folder/your-frontend-script.js"></script>
• 图片引用：<img src="/static/Img_Folder/your-image.jpg" alt="图片描述">

3. 移除HTML里对server.js的错误引用 #

把这行代码彻底删掉：

<script type = "text/javascript" src = "../../server.js"></script>

server.js是后端运行的脚本，绝对不能在前端页面中加载，这是完全错误的用法。

三、关于HTML文件是否要放到views文件夹的问题 #

不是强制要求，但推荐遵循这个约定。

views文件夹是Express生态里约定俗成的视图文件目录，用来存放HTML或模板引擎文件，这样项目结构会更清晰规范。如果你想调整，可以把项目结构改成这样：

- Frontend
  - Project
    - assets（静态资源）
      - CSS_folder
      - JS_folder
      - Img_Folder
    - views（存放HTML文件）
      - index.html
      - docs.html
- server.js（建议移到项目根目录，管理更方便）

然后修改路由里的sendFile路径：

res.sendFile(path.resolve(__dirname, './Frontend/Project/views/index.html'));

当然，如果你不想调整现有结构，保持HTML在当前位置也能正常运行，只是项目结构的规范性稍差一点而已。

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