如何解决Nuxt3 AWS EC2生产环境下的CSS预加载错误？

• 检查静态资源访问有效性

  • 在EC2服务器上执行curl https://stage.biomarkers-institute.com/_nuxt/default.4789a690.css，确认能正常获取CSS文件内容并返回200状态码。若无法获取，排查Nginx/Apache等反向代理对_nuxt目录的访问配置是否正确。
  • 核对AWS安全组规则，确保80/443端口对外开放，允许外部请求访问静态资源。

• 验证Nuxt构建与配置

  • 确认生产环境使用nuxt build命令构建，而非开发模式的nuxt dev，避免资源路径不匹配。
  • 检查nuxt.config.ts中的app.baseURL或runtimeConfig.public.baseURL配置，确保生产环境资源路径前缀和当前域名一致，未使用本地相对路径或错误域名。

• 排查缓存与CDN问题

  • 若使用CDN，清除CDN缓存后重新测试，避免缓存旧的资源引用路径。
  • 强制刷新浏览器页面（Ctrl+Shift+R），排除本地缓存导致的请求异常。

• 检查HTTPS与SSL配置

  • 确认EC2上的SSL证书配置正常，浏览器访问时无证书错误，否则会阻止资源加载。可通过浏览器控制台安全面板查看证书状态。
  • 检查反向代理的HTTPS转发规则，避免页面用HTTPS但CSS请求走HTTP的协议不匹配问题。

• 核对构建产物与日志

  • 查看EC2上Nuxt生产日志，排查是否有构建时CSS文件生成失败或路径异常的提示。
  • 检查服务器.output/public/_nuxt目录下是否存在default.4789a690.css文件，文件权限是否设置为可读取（推荐644）。

内容的提问来源于stack exchange，提问作者Alberto Sanmartin Martinez