Nginx子URL部署Nuxt应用遇404错误，需如何调整配置？

要让Nuxt应用正常运行在/cartographie子路径下，需要同时调整Nuxt应用配置和Nginx配置：

一、调整Nuxt应用的基础路径配置 #

打开Nuxt项目的配置文件（nuxt.config.ts 或 nuxt.config.js），添加子路径配置：

• 若为Nuxt 3：

export default defineNuxtConfig({
  app: {
    baseURL: '/cartographie/'
  }
})

• 若为Nuxt 2：

export default {
  router: {
    base: '/cartographie/'
  }
}

修改后重新构建Nuxt应用并重启服务。

二、修改Nginx配置 #

当前Nginx的location /cartographie配置未正确处理子路径映射和单页应用路由，修改如下：

server {
    listen 443 ssl http2;
    server_name bottin.marche.be;
    root /var/www/applications/bottin/public;

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
    add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

    # 修改后的Nuxt代理配置
    location /cartographie {
        proxy_pass http://nuxt/; # 末尾添加斜杠，将/cartographie后的路径映射到Nuxt根路径
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;

        # 处理单页应用路由，刷新页面时不会404
        try_files $uri $uri/ @cartographie;
    }

    # 路由重写规则，转发到Nuxt入口
    location @cartographie {
        proxy_pass http://nuxt/cartographie/;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
    }

    location / {
        try_files $uri /index.php$is_args$args;
    }    

    location ~ ^/index\.php(/|$) {
        fastcgi_pass php;
        # 保留原有的fastcgi配置
    }
}

关键修改点说明： #

1. proxy_pass http://nuxt/：末尾添加斜杠，Nginx会自动去掉/cartographie前缀，将剩余路径转发给Nuxt服务，匹配Nuxt配置的基础路径。
2. 添加try_files和@cartographie规则：处理单页应用的前端路由，当用户刷新子路径下的页面时，请求会转发到Nuxt的入口文件，避免404。

验证配置 #

1. 重启Nginx服务：sudo systemctl restart nginx
2. 确认Nuxt服务正常运行：curl http://127.0.0.1:3000（若Nuxt监听其他端口，替换为对应端口）

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