Laravel Inertia React项目经Cloudflare Tunnel部署后跨设备静态资源加载失败

核心原因 #

其他设备请求http://127.0.0.1:5173的Vite资源，根源在于：

• Vite开发服务器默认绑定本地回环地址，仅本机可访问
• 资源生成路径未指向Cloudflare Tunnel域名，导致跨设备请求本地无效地址

解决方案 #

1. 生产部署环境：构建静态资源并关闭Vite开发服务器 #

生产场景下无需运行Vite开发服务器，直接构建静态资源即可：

• 执行构建命令生成生产环境资源：

  npm run build
  

• 构建完成后，静态资源会输出到public/build目录，Laravel会自动加载这些资源，无需额外配置。

2. 开发环境：调整Vite配置支持跨设备访问 #

如果是开发阶段通过Cloudflare Tunnel共享应用给其他设备测试，修改vite.config.js：

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

export default defineConfig({
    plugins: [
        laravel(['resources/css/app.css','resources/js/app.jsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/jsx',
        },
    },
    build: {
        outDir: 'public/build',
    },
    server: {
        host: '0.0.0.0', // 监听所有网卡，允许隧道/局域网设备访问
        port: 5173,
        https: false,
        cors: true,
        origin: 'https://your-cloudflare-tunnel-domain.com' // 替换为你的Cloudflare Tunnel域名，修正资源路径
    },
});

3. 配置Laravel环境变量 #

修改.env文件，确保应用URL指向Cloudflare Tunnel域名：

APP_URL=https://your-cloudflare-tunnel-domain.com
ASSET_URL=${APP_URL}

4. 验证Cloudflare Tunnel配置 #

确认隧道的服务指向是Laravel应用的运行端口（通常为8000，而非Vite的5173），Laravel会自动代理Vite开发服务器的资源请求。

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