Nuxt应用引用不存在的JS文件报404错误问题咨询

部署流程类问题 #

• 构建产物未完整同步：/_nuxt/ 下的JS文件默认携带内容哈希，每次构建后文件名都会变化，若部署时仅删除旧产物但新产物未全部上传，就会出现请求的文件不存在的问题。可对比本地构建生成的 .output/public/_nuxt（Nuxt3）或 dist/_nuxt（Nuxt2）目录与服务器对应目录的文件列表，确认缺失文件是否存在于本地构建产物中。
• 构建环境不一致：本地开发环境和staging服务器的Node版本、依赖版本差异会导致构建产物的哈希值不同。优先检查服务器构建时的Node版本是否和本地对齐，构建前执行 npm ci 而非 npm install 保证依赖版本完全和锁文件一致。

Apache 配置类问题 #

• 静态资源路由规则异常：Nuxt生成的JS文件名可能包含 []、@ 等特殊字符，若Apache的重写规则错误将/_nuxt/路径的请求转发到Node服务而非直接返回静态文件，就会返回404。可在VirtualHost配置中添加以下规则，指定/_nuxt/路径直接读取静态目录：

Alias /_nuxt /你的项目实际路径/.output/public/_nuxt
<Directory /你的项目实际路径/.output/public/_nuxt>
    AllowOverride None
    Require all granted
</Directory>

• 大小写敏感触发异常：Ubuntu文件系统大小写敏感，而Windows/macOS默认大小写不敏感，若代码中引用的文件路径大小写和实际产物文件名大小写不一致，本地可正常访问但服务器会404，可直接核对报错文件名和服务器实际存在的文件名大小写是否完全匹配。

权限&缓存类问题 #

• 静态文件读取权限不足：检查服务器/_nuxt/目录下文件的权限，确认运行Apache的www-data用户有可读权限，若文件为root用户上传且权限配置为600，Apache无法读取就会返回404，可执行 sudo chown -R www-data:www-data /你的项目静态目录路径 修复。
• 缓存指向旧版本资源：若staging环境配置了CDN或用户浏览器缓存了旧的HTML页面，页面引用的是旧版本带哈希的JS文件，新部署后旧JS文件已被删除就会出现404，可通过隐身模式访问、清理CDN缓存验证。

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