Nuxt.js设置publicPath后页面404：子目录部署故障排查

你已经配置了publicPath，但Nuxt 2部署到子目录需要同时配置路由基础路径和服务器重写规则，只靠build.publicPath是不够的。我来一步步帮你解决：

1. 完善nuxt.config.js的核心配置 #

你需要在配置中添加router.base，它负责告诉Nuxt应用的路由根路径，这样所有生成的路由链接都会自动带上子目录前缀：

export default {
  // 路由基础路径，必须和你的子目录路径完全匹配，末尾记得加斜杠
  router: {
    base: '/apps/nuxt/'
  },
  // 静态资源的公共路径，保持你原来的配置，同样建议末尾加斜杠
  build: {
    publicPath: 'https://qa.nicetry.com/apps/nuxt/'
  }
}

修改后重新执行yarn run build，再部署dist目录到服务器。

2. 配置服务器重写规则（关键！） #

出现访问子目录404、子路由刷新失效的核心原因是：服务器不知道该把这些子目录下的请求转发到Nuxt的index.html（SPA应用需要前端路由接管）。以Nginx为例，添加以下配置：

location /apps/nuxt {
  # 替换成你服务器上Nuxt dist目录的实际路径
  alias /usr/share/nginx/html/nuxt-dist;
  # 尝试匹配文件、目录，匹配不到就转发到index.html让Nuxt路由处理
  try_files $uri $uri/ /apps/nuxt/index.html;
}

如果是Apache服务器，对应的.htaccess配置如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /apps/nuxt/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /apps/nuxt/index.html [L]
</IfModule>

3. 额外注意事项 #

• 确保应用内的跳转都使用Nuxt提供的<nuxt-link>组件，而不是原生<a>标签，这样路由会自动带上router.base的前缀，避免出现错误的跳转路径。
• 检查dist目录部署的位置是否正确，服务器配置中的路径要和实际部署路径完全对应。
• 确认build后的静态资源（css、js、图片）路径都带有你配置的publicPath前缀，浏览器控制台能正常加载这些资源就说明这部分没问题。

按照以上步骤配置后，访问https://qa.nicetry.com/apps/nuxt应该能正常显示首页，子路由刷新也不会再出现404了。

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