部署至Vercel后Bootstrap资源加载失败（404错误）求助

别担心，刚接触前端部署遇到这类问题太正常了！我帮你分析下可能的原因，再给你几个可行的解决办法：

核心原因推测 #

你本地用Live Server能正常加载，但部署到Vercel就报404，大概率是资源路径解析逻辑不同或者Vercel无法访问你本地的node_modules资源——因为node_modules属于开发依赖，默认不会被上传到Git仓库，Vercel部署时自然找不到这个目录里的文件。

具体解决办法 #

1. 改用CDN引入Bootstrap（最省心的方案）

直接把你HTML里引用本地Bootstrap的代码，替换成CDN链接，这样部署后会从公共CDN加载资源，完全避开路径问题：

<!-- 替换原有的Bootstrap CSS引用 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- 替换原有的Bootstrap JS引用 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

这个方法不用改任何配置，直接替换就能生效，适合新手快速解决问题。

2. 用构建工具打包Bootstrap资源（适合想保留本地依赖的情况）

如果你习惯用npm管理依赖，需要让构建工具（比如Vite、Webpack）把Bootstrap的资源打包到部署目录里：

• 在你的项目入口文件（比如main.js）里直接导入Bootstrap：

  import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap/dist/js/bootstrap.bundle.min.js'
  

• 执行项目的构建命令（比如npm run build），生成dist（或对应工具的输出目录）
• 检查Vercel的部署配置，确保它识别到了你的构建输出目录（Vercel通常会自动识别主流构建工具的输出目录，比如Vite的dist）

3. 检查并修正资源路径

如果你手动把Bootstrap文件复制到了项目的public或静态资源目录，要确保HTML里的引用路径正确：

• 比如Bootstrap JS放在public/js/bootstrap.bundle.min.js，那script标签应该写：

  <script src="/js/bootstrap.bundle.min.js"></script>
  

  注意开头的/代表项目根目录，避免用相对路径（比如../node_modules/xxx）导致部署后路径混乱。

额外排查小技巧 #

• 部署成功后，打开页面右键查看源码，找到Bootstrap的script标签，点击链接确认是不是真的404，能直观看到路径哪里错了
• 检查你的.gitignore文件，是不是把静态资源目录也排除了？不过正常.gitignore只会排除node_modules，所以主要还是路径问题

按照上面的方法试一下，应该能解决你的问题，要是还有细节不清楚可以再补充哦～

备注：内容来源于stack exchange，提问作者Maximiliano Leonel Pérez