Node.js应用中HTML文件无法加载Bootstrap样式求助

核心原因 #

你在HTML中写的相对路径是本地文件系统的路径，但Node.js作为Web服务运行时，默认不会暴露node_modules目录的访问权限，浏览器请求该CSS资源时会返回404错误，因此样式无法加载。同时你提供的HTML代码存在语法问题：<head>标签未闭合，也可能导致资源加载异常。

解决方案 #

方案一：配置静态资源托管（最常用，适合Express框架） #

绝大多数Node.js Web项目使用Express框架，你可以在根目录的index.js中添加静态资源托管规则：

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

// 开放node_modules目录的访问权限，访问前缀为/node_modules
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));
// 托管view目录作为前端页面的根目录
app.use(express.static(path.join(__dirname, 'view')));

// 启动服务，端口可自行修改
app.listen(3000, () => console.log('服务已启动，访问http://localhost:3000即可查看页面'));

修改HTML中CSS的引入路径为绝对路径，同时补全闭合的</head>标签：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyApp</title>
    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="all">
</head>

方案二：复制静态资源到项目目录（更安全规范） #

不建议对外暴露整个node_modules目录，你可以手动将node_modules/bootstrap/dist/css/bootstrap.min.css复制到view目录下的css文件夹中（没有就新建），之后直接引用该路径即可：

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

排查验证 #

启动服务后打开浏览器，按F12打开开发者工具：

• 切换到「网络」面板，刷新页面，查看CSS资源的请求状态：如果返回404说明静态资源托管配置错误；如果返回200但样式不生效，检查你安装的Bootstrap版本和使用的类名是否匹配，比如Bootstrap 5的导航栏类名和旧版本存在差异。

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