部署后所有页面都404是路由配置的问题吗?
从现在开始,我们要努力学习啦!今天我给大家带来《部署后所有页面都404是路由配置的问题吗?》,感兴趣的朋友请继续看下去吧!下文中的内容我们主要会涉及到等等知识点,如果在阅读本文过程中有遇到不清楚的地方,欢迎留言呀!我们一起讨论,一起学习!
问题根源是服务器未正确加载index.html文件,需依次检查:根目录路径匹配、默认首页配置(index index.html)、子路径的base设置、安全规则拦截及文件权限(755/644且属主为www)。

如果您部署 Vue 或 React 等单页应用后,所有页面(包括首页)均返回 404 错误,则问题通常并非路由配置本身,而是服务器根本未正确加载 index.html 文件。这表明请求未抵达前端入口,而是被服务器判定为路径不存在。
一、检查服务器根目录与文件实际位置是否匹配
该步骤用于确认静态资源是否真实存在于服务器指定路径中。Linux 系统严格区分大小写,且 Nginx/Apache 的 root 或 DocumentRoot 指令决定了请求解析的起始点。若上传的 index.html 实际位于 /www/wwwroot/myapp/dist/index.html,但服务器配置指向 /www/wwwroot/myapp,则所有请求都将失败。
1、登录宝塔面板,进入网站设置,查看「网站目录」中「根目录」路径是否与您上传构建产物的物理路径完全一致。
2、通过宝塔文件管理器或 SSH 进入该根目录,确认是否存在名为 index.html 的文件,且文件名拼写、大小写无误。
3、在浏览器中直接访问 https://your-domain.com/index.html(显式带 .html 后缀),若仍 404,说明服务器未找到该文件;若可打开,则问题出在默认索引配置或重写规则。
二、验证默认首页配置是否启用
服务器需明确告知:当用户访问目录(如 /)时,应自动尝试加载 index.html。若此机制被禁用或覆盖,将导致根路径请求直接 404。
1、在宝塔面板中打开网站设置,切换至「配置文件」选项卡。
2、查找 Nginx 配置中的 location / 块,确认其中包含 index index.html; 行。
3、若使用 Apache,在 .htaccess 或虚拟主机配置中检查是否存在 DirectoryIndex index.html 指令。
三、排查子路径部署缺失 base 配置
当项目部署在非根路径(例如 https://example.com/admin/)时,前端构建产物必须声明公共基础路径,否则所有 JS/CSS 资源引用将从根目录发起请求,全部 404。
1、检查项目根目录下的 vue.config.js(Vue)或 vite.config.ts(Vite)中是否设置了 base: '/admin/'(末尾必须带斜杠)。
2、重新执行构建命令(如 npm run build),确认 dist 目录中生成的 index.html 内部 script 标签 src 属性前缀是否已变为 /admin/js/app.xxxx.js。
3、在宝塔中将构建产物整体上传至子目录(如 /www/wwwroot/example/admin/),并确保该子目录被正确映射为可访问路径。
四、确认 Nginx/Apache 是否拦截或重定向了所有请求
某些安全插件、伪静态规则或反向代理配置可能意外屏蔽或改写原始请求,使 index.html 无法响应。
1、在宝塔网站设置中关闭「防跨站攻击(Open_basedir)」临时测试,排除其干扰。
2、检查「伪静态」选项卡内容,若存在自定义规则,暂时清空并保存,观察 404 是否消失。
3、在 Nginx 配置中搜索是否有类似 return 404; 或 deny all; 的指令作用于 location / 范围内。
五、验证文件权限与所有权
即使文件存在且路径正确,若 Web 服务进程(如 www 用户)无读取权限,Nginx/Apache 将拒绝提供服务并返回 404(而非 403)。
1、在宝塔文件管理器中选中 dist 目录及内部所有文件,右键「属性」,确认「数字权限」为 755(目录)和 644(文件)。
2、确认文件所有者为 www,所属组也为 www。若显示为 root 或其他用户,点击「修改用户/组」进行修正。
3、在终端中执行 ls -l /www/wwwroot/your-site/dist/,逐行核对权限列与用户列输出是否符合预期。
终于介绍完啦!小伙伴们,这篇关于《部署后所有页面都404是路由配置的问题吗?》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!
如何利用 Performance API 识别 JS 脚本解析 (Compile) 与执行耗时的配比
- 上一篇
- 如何利用 Performance API 识别 JS 脚本解析 (Compile) 与执行耗时的配比
- 下一篇
- 京东2025双11购物津贴使用技巧 京东优惠叠加方案
-
- 文章 · 常见问题 | 2星期前 |
- 2026春运火车票开售时间表出炉
- 353浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- Shift键失灵怎么修?火山口清理+导电胶修复技巧
- 387浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 空气炸锅不工作维修指南
- 197浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 如何查看电脑系统激活状态|系统合规检测指南
- 114浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- Windows沙盒无法打开怎么解决
- 298浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 2K与1440P分辨率对比解析
- 262浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 动态壁纸设置教程:视频变桌面背景方法
- 169浏览 收藏
-
- 文章 · 常见问题 | 2星期前 | 万用表的使用方法
- 万用表测频率方法及技巧详解
- 132浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 墙壁发霉脱皮怎么修?自己动手翻新步骤详解
- 476浏览 收藏
-
- 文章 · 常见问题 | 2星期前 |
- 电脑没声音显示红叉怎么解决
- 399浏览 收藏
-
- 文章 · 常见问题 | 2星期前 | 美的空气能
- 美的空气能E12代码故障解析
- 450浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- 剧云
- 剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
- 79次使用
-
- 万象有声
- 万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
- 84次使用
-
- Red Skill
- 小红书创作服务平台为小红书创作者和机构提供视频上传、数据分析、粉丝管理、创作指导等多项运营服务,助力用户解锁更多创作者专属功能,体验高效创作!
- 88次使用
-
- MiMo Code
- MiMo Code 是小米大模型团队开源的新一代 AI 编程助手,面向开发者提供代码理解、生成与辅助开发能力,适合作为 AI 编程工具收藏和体验。
- 183次使用
-
- TRAE Work
- TRAE AI IDE | 国内首款 AI 原生集成开发环境,深度集成 Doubao-1.5-pro 与 DeepSeek 模型,支持中文自然语言一键生成完整代码框架,实时预览前端效果并智能修复 BUG。首创 Builder 模式实现需求到代码的自动化开发,兼容 Windows/macOS 系统,官网下载即用。
- 209次使用
-
- 微波炉空转有什么危害
- 2025-12-14 501浏览
-
- 1分米等于10厘米,换算方法简单
- 2025-12-19 501浏览
-
- 新房入住头晕咳嗽?甲醛超标怎么查怎么治
- 2025-12-20 501浏览
-
- 什么是 Kubernetes 的 Pod 生命周期回调?
- 2025-12-21 501浏览
-
- 冬季穿衣静电多?去静电妙招分享
- 2025-12-23 501浏览

