WSL Ubuntu下Laravel+Inertia+React+Vite开发模式页面空白问题

1. 修正Vite服务器配置 #

打开vite.config.js，确保server选项配置正确，让Vite允许本地域名访问并匹配资源路径：

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5173, // 默认端口，确认未被占用
    origin: 'http://test.portfolio.com:5173',
    cors: true,
  },
  // 其他原有配置...
})

这里的origin必须和你的本地域名完全匹配，带上Vite的端口，保证Laravel能正确代理到开发服务器。

2. 调整Laravel环境变量 #

修改.env文件，设置正确的应用和资源地址：

APP_URL=http://test.portfolio.com
ASSET_URL=http://test.portfolio.com:5173

ASSET_URL指向Vite开发服务器地址，让Laravel在dev模式下加载实时编译的资源，而非本地静态文件。

3. 添加Apache反向代理规则 #

在你的Apache虚拟主机配置中，新增Vite资源的代理转发规则：

ProxyPass /@vite/ http://127.0.0.1:5173/@vite/
ProxyPassReverse /@vite/ http://127.0.0.1:5173/@vite/
ProxyPass /resources/ http://127.0.0.1:5173/resources/
ProxyPassReverse /resources/ http://127.0.0.1:5173/resources/

配置完成后重启Apache：sudo systemctl restart apache2

4. 确认Inertia根模板的资源加载指令 #

检查resources/views/app.blade.php，确保使用Laravel官方的Vite指令，不要硬编码资源路径：

@vite('resources/js/app.jsx')
@inertiaHead

这个指令会自动区分dev和prod环境，正确加载对应资源。

5. 清除缓存并重启服务 #

• 清除Laravel配置缓存：php artisan config:clear
• 停止当前运行的npm run dev，重新启动开发服务器
• 浏览器按Ctrl+Shift+R强制刷新，禁用缓存加载页面

6. 查看浏览器控制台定位问题 #

打开浏览器开发者工具（F12），检查Console和Network标签：

• 若出现404错误，说明资源路径不匹配，回头检查ASSET_URL和Vite配置
• 若出现CORS错误，确认Vite配置中server.cors为true，且Apache代理规则生效

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