Laravel部署至Forge后Vite构建资源生产环境加载失败求助

问题现象 #

• Laravel应用部署到Forge平台后，Vite构建的JS/CSS资源无法加载
• Firefox提示CORS错误，Chrome提示SSL错误，但因Forge故障尚未配置SSL，且判断这两个提示并非真实原因
• 尝试使用CORS扩展、Chrome启动参数--ignore-certificate-errors后问题仍存在
• 本地开发环境正常，服务器执行npm run build后无改善
• 错误截图显示控制台仅针对Vite资源报加载错误，非全站资源受影响

当前vite.config.js配置 #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import basicSsl from '@vitejs/plugin-basic-ssl';
// import cors from "cors";
import fs from 'fs';


export default defineConfig({
plugins: [
    laravel({
        input: 'resources/js/app.js',
        refresh: true,
    }),
    vue({
        template: {
            compilerOptions: {
                isCustomElement: (tag) => ['Tags'].includes(tag),
            }
        },
    }),
    basicSsl(),
],
server: {
    // port: 3000,
    // https: true,
    hmr: {
        host: 'localhost',
        // port: 3001,
        protocol: 'wss',
        origin: false,
    },
        // key: fs.readFileSync(`C:/laragon/etc/ssl/laragon.key`),
        // cert: fs.readFileSync(`C:/laragon/etc/ssl/laragon.crt`),
},
resolve: {
    preserveSymlinks: true,
    server: {
        https: true,
        origin: 'localhost'

    },
    cors: true,

},
});

排查与解决方案 #

1. 清理本地开发配置残留 #

你的配置中保留了大量仅适用于本地开发的设置，会干扰生产环境的资源路径生成：

• 移除basicSsl插件，生产环境不需要本地SSL支持
• 删除server配置块（仅用于本地开发服务器）
• 移除resolve下的server配置项

修改后的核心配置示例：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => ['Tags'].includes(tag),
                }
            },
        }),
    ],
    resolve: {
        preserveSymlinks: true,
    },
});

2. 确认Forge构建流程 #

• 检查Forge部署脚本是否包含npm install和npm run build，标准部署脚本示例：

  cd /home/forge/your-site-domain
  git pull origin main
  composer install --no-interaction --prefer-dist --optimize-autoloader
  npm install
  npm run build
  php artisan migrate --force
  

• 验证服务器public/build目录是否存在manifest.json及对应的JS/CSS文件，若不存在则查看Forge部署日志定位构建失败原因

3. 规范资源加载方式 #

确保Laravel模板中使用@vite('resources/js/app.js')指令加载资源，该指令会自动读取manifest.json生成正确的生产环境资源URL，禁止手动编写静态资源路径

4. 检查站点根目录与Nginx配置 #

• 确认Forge站点根目录设置为public，这是Laravel应用的标准根目录
• 检查Nginx配置是否正确处理静态资源，Forge默认配置应包含：

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 1y;
      add_header Cache-Control "public, immutable";
  }
  

5. 临时禁用HTTPS强制跳转 #

若Forge站点设置中开启了“Force HTTPS”，暂时关闭该选项，避免浏览器自动强制HTTPS访问导致资源加载异常

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