如何在ExpressJS项目中本地引入Bootstrap？

嗨，我之前也踩过这个坑，核心问题出在静态资源路径拼接错误和HTML引用路径不匹配上，咱们一步步来搞定：

1. 修正Express静态资源托管的路径 #

你写的app.use(express.static(__dirname + '../node_modules/bootstrap/dist'));有问题——__dirname本身就是当前app.js所在的目录（一般是项目根目录），加上../会让路径往上跳一级，根本找不到node_modules文件夹。

推荐两种正确的写法：

• 直接拼接正确的相对路径（适合简单项目）：

  app.use(express.static(__dirname + '/node_modules/bootstrap/dist'));
  

• 用path模块规范拼接（更稳妥，避免不同系统路径分隔符的问题）：
  先引入path模块：

  const path = require('path');
  

  然后托管Bootstrap的dist目录，还可以给资源加个前缀方便管理：

  app.use('/bootstrap', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));
  

2. 同步修正HTML中的引用路径 #

路径托管好后，HTML里的引用要和托管路径对应上：

• 如果用第一种无前缀的托管方式，HTML里直接写根路径下的文件：

  <link rel="stylesheet" href="/bootstrap.min.css"/>
  <script src="/bootstrap.min.js"></script>
  

• 如果用第二种带/bootstrap前缀的方式，路径要加上前缀：

  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
  

3. 别忘了Bootstrap的依赖（关键！） #

Bootstrap 4及以上版本依赖jQuery和Popper.js，如果没引入这两个，下拉菜单、模态框这些交互组件会直接失效。你可以同样托管这两个依赖：

// 托管jQuery
app.use('/jquery', express.static(path.join(__dirname, 'node_modules/jquery/dist')));
// 托管Popper.js
app.use('/popper', express.static(path.join(__dirname, 'node_modules/@popperjs/core/dist/umd')));

然后在HTML里按顺序引入（必须先jQuery，再Popper，最后Bootstrap）：

<script src="/jquery/jquery.min.js"></script>
<script src="/popper/popper.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>

这样调整后，Bootstrap应该就能正常加载啦！

内容的提问来源于stack exchange，提问作者Diego Izquierdo Dussan