Inertia.js 中的空白页 - 控制台中没有错误

Question

为了让 Inertia.js 与 Laravel 和 VueJS 一起工作，我已经尝试了 8 个小时左右。我得到的是一个空白页面，控制台中没有错误消息（实际上是前端和后端控制台）。我得到的是一个空白页面和一个带有无限加载动画的选项卡运行。

我在网上搜索了答案。我没有发现任何真正有帮助的东西。

我想要实现的是获得与我正在使用的 YouTube 教程类似的结果 (https://www.youtube.com/watch?v=XEW2d2XHkAk)。

web.php 文件的内容如下：

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

//
Route::get("/hello", function () {
    return inertia("Hello");
});

这是 app.js 文件的内容：

import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    new Vue({
      render: h => h(App, props),
    }).$mount(el)
  },
})

Kernel.php 文件的内容如下：

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\HandleInertiaRequests::class,
        ],

        'api' => [
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];
}

app.blade.php 文件的内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

这是 Hello.vue 文件的内容：

<template>
    <div>hi there i am the hello page</div>
</template>

<script>
    export default {};
</script>

Answer 1

好的。我认识的人找到了答案。

所以我对这两个命令感到困惑：

npm run watch

对比

php artisan serve

浏览器会在端口 3000 上打开带有应用程序运行ning 的选项卡。所以我需要做的就是更改浏览器中的端口。例如：

http://127.0.0.1:8000/hello

编辑：总而言之，您使用“npm 运行 watch”来确保您的应用程序在浏览器中始终是最新的”并且您运行“php artisan serve" 将您的应用程序提供给浏览器。您运行这两个命令，但您必须使用在运行之后提供给您的端口 php artisan serve"命令。

Inertia.js 中的空白页 - 控制台中没有错误

Blank page in Inertia.js - no error in console

inertiajs

laravel

vue.js