Laravel Forge环境下配置Nginx与Vite解决npm run dev资源加载失败问题

1. 配置Vite项目设置 #

修改项目根目录下的vite.config.js，确保server配置适配Forge的HTTPS环境：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0', // 允许外部设备访问Vite服务器
        port: 5173, // Vite默认端口，保持一致即可
        origin: 'https://your-forge-site-domain.com:5173', // 替换为你的Forge站点完整域名（带HTTPS和端口）
        hmr: {
            host: 'your-forge-site-domain.com', // 同站点域名
            protocol: 'wss', // 适配HTTPS的WebSocket协议
        },
    },
});

2. 调整Nginx站点配置 #

在Laravel Forge的站点Nginx配置面板中，找到server块，添加以下反向代理规则（放在原有PHP处理规则之前）：

# 反向代理Vite开发服务器请求，处理静态资源和热重载
location ~ ^/(@vite|resources/css|resources/js) {
    proxy_pass http://127.0.0.1:5173;
    proxy_set_header Host $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;

    # 支持WebSocket热重载（HMR）
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

添加完成后，在Forge面板中重启Nginx（或执行sudo service nginx reload）。

3. 开放Vite端口 #

在Forge服务器的防火墙设置中，添加一条入站规则：

• 端口：5173
• 协议：TCP
• 来源：0.0.0.0/0（或限制为你的IP更安全）

4. 启动Vite开发服务器 #

可以直接执行命令启动：

npm run dev -- --host=0.0.0.0

或者修改package.json的scripts，简化启动命令：

"scripts": {
    "dev": "vite --host=0.0.0.0",
    "build": "vite build"
}

之后直接运行npm run dev即可。

5. 验证模板指令 #

确保Blade模板中使用Laravel官方的@vite指令加载资源，不要手动编写script/link标签：

@vite(['resources/css/app.css', 'resources/js/app.js'])

完成以上配置后，访问你的Forge站点，静态资源和热重载功能应该可以正常工作。

内容的提问来源于stack exchange，提问作者Apród Illés