Laravel Vite应用部署Nginx子目录后Build资源加载404问题

1. 修正Vite配置（vite.config.js） #

核心是指定资源的基础路径前缀，匹配你的子目录地址：

export default defineConfig({
  // 设置资源的基础URL前缀，结尾必须带斜杠
  base: '/modernapp/',
  plugins: [
    laravel({
      input: ['resources/js/main.js'],
      refresh: true,
      // 可选：将编译后的资源放到public下的modernapp/build目录
      // 若不设置，资源默认存放在public/build，需通过后续Nginx配置映射路径
      buildDirectory: 'modernapp/build',
    }),
    // 其余插件配置保持不变
  ],
  // 其余配置保持不变
})

2. 更新Laravel环境变量 #

在项目根目录的.env文件中，设置正确的应用完整URL：

APP_URL=https://laravel.domain.com/modernapp

3. 配置Nginx服务器 #

根据是否修改buildDirectory，选择对应配置：

情况一：已设置buildDirectory: 'modernapp/build' #

server {
    listen 443 ssl;
    server_name laravel.domain.com;

    # SSL证书、密钥等配置省略

    # 处理子目录路由请求
    location /modernapp {
        root /path/to/your/laravel/project;
        try_files $uri $uri/ /modernapp/index.php?$query_string;

        # 处理PHP脚本请求
        location ~ \.php$ {
            fastcgi_pass unix:/run/php/php8.2-fpm.sock; # 替换为你的PHP-FPM实际路径
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }

    # 静态资源缓存优化
    location /modernapp/build {
        root /path/to/your/laravel/project/public;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

情况二：未修改buildDirectory（资源默认在public/build） #

server {
    listen 443 ssl;
    server_name laravel.domain.com;

    # SSL证书、密钥等配置省略

    location /modernapp {
        root /path/to/your/laravel/project;
        try_files $uri $uri/ /modernapp/index.php?$query_string;

        location ~ \.php$ {
            fastcgi_pass unix:/run/php/php8.2-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }

    # 将子目录路径映射到实际静态资源目录
    location /modernapp/build {
        alias /path/to/your/laravel/project/public/build;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

4. 重新编译静态资源 #

执行编译命令，生成带正确路径前缀的资源文件：

npm run build

验证 #

编译完成后，检查：

• 若设置了buildDirectory，确认public/modernapp/build目录下存在编译后的资源；
• 打开浏览器开发者工具的网络面板，确认静态资源请求URL为https://laravel.domain.com/modernapp/build/assets/xxx.js，不再返回404。

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