Nuxt3部署至Apache2子目录遇资源路径及路由异常求助

核心问题分析 #

你的问题根源在于Nuxt 3的base路径配置与Apache反向代理的配合不当，同时混淆了SSR部署与静态文件部署的目录结构。以下是分步解决方案：

1. 修正Nuxt 3配置文件（nuxt.config.js） #

Nuxt 3已弃用router.base，需改用官方推荐的app.baseURL，同时补充运行时配置确保资源路径正确：

export default defineNuxtConfig({
  // 移除旧的router.base配置
  app: {
    baseURL: '/app/', // 核心：设置应用的基础路径
    head: {
      meta: [],
      link: []
    }
  },
  runtimeConfig: {
    public: {
      baseURL: '/app/' // 确保客户端能获取到基础路径
    }
  },
  vite: {
    base: '/app/', // 与app.baseURL保持一致，确保构建资源路径正确
    plugins: [svgLoader(), dynamicImport()]
  },
  server: {
    port: 8080 // 保留端口配置，与PM2、Apache配合
  }
})

2. 重新构建项目 #

构建时需确保环境变量同步基础路径，避免构建出的资源路径错误：

NUXT_APP_BASE_URL=/app/ nuxt build

3. 调整部署目录（避免与原有项目冲突） #

不要将.output目录放入/var/www/html/app（这是静态文件部署的方式），SSR模式需单独存放：

• 将构建后的.output目录完整复制到服务器的独立目录，比如/opt/nuxt-app
• 确保该目录权限正确：

sudo chown -R www-data:www-data /opt/nuxt-app

4. 修正PM2配置（ecosystem.config.js） #

更新配置指向新的部署目录，并添加环境变量确保Nuxt运行时识别基础路径：

module.exports = {
  apps: [
    {
      name: 'nuxt-app',
      port: '8080',
      cwd: '/opt/nuxt-app', // 指向新的部署目录
      exec_mode: 'cluster',
      instances: 'max',
      script: './server/index.mjs',
      env: {
        NUXT_APP_BASE_URL: '/app/' // 运行时传递基础路径
      }
    }
  ]
}

重启PM2服务：

pm2 delete nuxt-app
pm2 start ecosystem.config.js

5. 调整Apache反向代理配置 #

关键是添加X-Forwarded-Prefix头让Nuxt识别前缀路径，同时处理SPA路由刷新问题：

# 先确保启用必要的模块
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so

<VirtualHost *:443>
  # 原有HTTPS配置（证书、ServerName等）保留

  # 处理/app路径的反向代理
  ProxyPass /app http://localhost:8080/app
  ProxyPassReverse /app http://localhost:8080/app

  # 添加前缀头，让Nuxt知道当前请求的基础路径
  RequestHeader set X-Forwarded-Prefix "/app"

  # 处理SPA路由刷新：将/app下的所有路由转发到Nuxt服务
  RewriteEngine On
  RewriteRule ^/app/(.*)$ http://localhost:8080/app/$1 [P,L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^/app/(.*)$ http://localhost:8080/app/$1 [P,L]

  # 原有/var/www/html项目的配置保留
  DocumentRoot /var/www/html
</VirtualHost>

重启Apache生效：

sudo systemctl restart apache2

常见问题验证 #

• 资源路径错误：构建后检查.output/public/_nuxt下的资源引用，确认路径前缀为/app/_nuxt/
• 刷新跳根目录：访问https://example.net/app/your-page后刷新，确认不会跳转到根路径
• 404错误：确保Apache的代理规则覆盖了所有/app下的路径，且Nuxt服务正常运行

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