Next.js 14生产环境页面访问404问题求助

问题概述 #

项目构建部署后，访问/dns/services页面返回404，将路由改为/dns/train后问题依旧；本地开发环境运行完全正常，已排除路径大小写、路由名称为框架保留关键字的可能。

构建与目录信息 #

• 构建结果：构建过程无报错，输出目录dist下包含dns/services.html静态文件
• 源码结构：src/pages/dns目录下存在services子目录，对应页面组件文件齐全

排查方向与解决方案 #

1. 服务器SPA路由 fallback 配置
   单页应用使用history模式时，直接访问子路由会触发服务器404，需配置服务器将所有路由请求 fallback 到index.html：

   • Nginx配置示例：

     location / {
       try_files $uri $uri/ /index.html;
     }
     

   • Apache配置示例（需启用mod_rewrite）：

     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
     

   • 静态托管平台（Netlify/Vercel）：根目录创建_redirects文件，添加规则/* /index.html 200

2. 构建产物验证
   确认dist/dns/services.html文件存在且内容完整，若为静态站点生成框架（如Nuxt、Next），检查构建命令是否正确生成了该路由的静态资源。

3. 路由模式检查
   若未配置服务器history模式支持，可临时切换为hash模式测试，确认是否为路由模式导致的问题。

4. 项目基础路径配置
   检查框架的基础路径配置：

   • Vue项目：vue.config.js中publicPath需匹配部署路径
   • React项目：package.json中homepage字段需设置正确的部署根路径

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