Laravel+Breeze+React(Inertia)项目运行npm run dev后APP_URL无法加载页面求助

1. 核对环境配置 #

• 打开.env文件，确认APP_URL与本地Laravel服务地址完全匹配（比如用php artisan serve启动的话，默认是http://127.0.0.1:8000，不要带多余斜杠或错误端口）。
• 执行php artisan config:clear清除配置缓存，确保新配置生效。

2. 启动Laravel后端服务 #

Vite仅负责静态资源编译，必须单独启动Laravel后端服务：

php artisan serve

启动后再访问APP_URL对应的地址。

3. 检查Inertia核心配置 #

• 确认resources/js/app.jsx（或app.tsx）中的Inertia初始化代码正确：

import { createInertiaApp } from '@inertiajs/react'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import ReactDOM from 'react-dom/client'

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
  setup({ el, App, props }) {
    return ReactDOM.createRoot(el).render(<App {...props} />)
  },
})

• 检查routes/web.php中的Inertia路由配置是否存在：

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome');
});

4. 调整Vite代理配置 #

如果Vite与Laravel服务端口分离（比如Vite用5173，Laravel用8000），在vite.config.js中添加代理配置：

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

export default defineConfig({
    server: {
        proxy: {
            '/': {
                target: 'http://127.0.0.1:8000',
                changeOrigin: true,
            },
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

5. 排查浏览器端问题 #

• 按F12打开开发者工具，查看控制台报错（比如资源加载失败、路由不存在等），根据报错定位具体问题。
• 用无痕模式访问APP_URL，避免浏览器缓存干扰。

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