Node Express服务器：如何正确提供包含脚本与CSS的HTML文件？

我明白你现在的困扰：能渲染出index.html，但Bootstrap的样式和脚本完全没生效，试了各种方法都没搞定。其实问题出在静态资源的托管配置和资源引用路径这两个地方，咱们一步步来解决：

问题根源分析 #

1. 你的Express只托管了public目录，但Bootstrap的文件存在上层的node_modules里，浏览器请求这些资源时，Express找不到对应的目录，直接返回404。
2. 原来的资源引用路径用了相对路径../node_modules/...，浏览器请求时会从当前页面的URL路径去解析，和Express托管的目录不匹配。
3. Bootstrap的JS依赖jQuery，但你原来的脚本加载顺序反了，先加载了Bootstrap再加载jQuery，这也会导致Bootstrap无法正常初始化。

完整解决方案 #

1. 修正Express的静态资源配置（server/app.js） #

我们需要同时托管public和node_modules两个目录，这样浏览器才能访问到你的HTML和Bootstrap资源：

var express = require('express'), path = require("path");
const _port = 3000
var app = express();

// 托管public目录（存放你的HTML、自定义静态文件）
app.use(express.static(path.join(__dirname, '..', 'public')));
// 托管node_modules目录，让浏览器能请求到Bootstrap的资源
app.use(express.static(path.join(__dirname, '..', 'node_modules')));

app.get('/', function(req, res){
    // 用root参数明确指定index.html的根目录，避免相对路径错误
    res.sendFile('index.html', { root: path.join(__dirname, '..', 'public') });
});

app.listen(_port, function() {
    console.log('listening port '+_port+"\n__dirname : "+__dirname)
});

2. 修正index.html的资源引用路径和加载顺序 #

把相对路径改成绝对路径（从网站根目录出发），同时调整脚本加载顺序（先jQuery后Bootstrap）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 改用绝对路径，指向Express托管的node_modules目录 -->
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-default ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
        </div>
    </nav>
    <!-- 先加载jQuery，再加载Bootstrap（Bootstrap依赖jQuery） -->
    <script src="/jquery/dist/jquery.js"></script>
    <script src="/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

关键注意点 #

• 静态目录托管：express.static的作用是把本地目录映射为网站的可访问路径，我们需要把所有前端需要用到的资源目录都托管出去。
• 路径写法：绝对路径/xxx会直接从网站根目录开始查找，比相对路径更可靠，尤其是在路由复杂的项目里。
• 依赖顺序：Bootstrap的JavaScript组件必须在jQuery加载完成后再初始化，所以一定要把jQuery的脚本放在前面。

这样修改后，重启你的Express服务器，访问http://localhost:3000就能看到正常加载了Bootstrap样式的导航栏了。

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