Nuxt 3项目部署后刷新子页面报404错误的解决方案咨询

问题场景 #

使用npm run generate构建Nuxt3项目后，将dist/文件夹和.htaccess放在nuxt-deploy/根目录下部署。从主页跳转至文章页面（如https://nuxt-deploy.mpetrosyan.com/posts）正常，但直接刷新文章页面会出现404错误，且无法修改Apache主配置，不想将dist/内文件移至根目录。

原.htaccess配置 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteCond %{REQUEST_URI} !dist/
  RewriteRule (.*) /dist/$1 [L]
  RewriteRule ^dist\index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /dist/index.html [L]
</IfModule>

问题原因 #

原配置的规则顺序和逻辑存在问题：当刷新/posts时，第一条规则将请求转发到/dist/posts，但后续的文件/目录存在性检查是基于原请求路径而非转发后的路径，导致Apache无法匹配到正确的 fallback 规则，直接返回404。

修正后的.htaccess配置 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 将所有非dist开头的请求转发到dist目录
  RewriteCond %{REQUEST_URI} !^/dist/
  RewriteRule ^(.*)$ /dist/$1 [L]

  # 检查转发后的路径是否为实际存在的文件或目录
  RewriteCond %{DOCUMENT_ROOT}/dist%{REQUEST_URI} !-f
  RewriteCond %{DOCUMENT_ROOT}/dist%{REQUEST_URI} !-d
  # 若不存在，转发到dist/index.html让Nuxt路由接管
  RewriteRule ^dist/(.*)$ /dist/index.html [L]
</IfModule>

配置说明 #

• 转发请求到dist目录：确保所有前端路由请求都进入dist/目录下的静态资源范围。
• 检查实际文件/目录存在性：通过%{DOCUMENT_ROOT}/dist%{REQUEST_URI}直接验证转发后的路径是否存在真实文件或文件夹。
• Fallback到Nuxt入口文件：当路径不存在时，将请求转发到dist/index.html，由Nuxt3的客户端路由系统处理页面渲染，避免刷新404。

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