laravel - Inertia.js 中的空白页 - 控制台中没有错误
问题描述
我已经尝试了 8 个小时左右来让 Inertia.js 与 Laravel 和 VueJS 一起工作。我得到的是一个空白页面,控制台中没有错误消息(实际上是前端和后端控制台)。我所拥有的是一个空白页面和一个加载动画无限运行的选项卡。
我在网上搜索了答案。我没有发现任何真正有帮助的东西。
我想要实现的是获得类似于我正在使用的 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>
解决方案
好的。我认识的人找到了答案。
所以我对这两个命令感到困惑:
npm run watch
相对
php artisan serve
浏览器将打开一个选项卡,其中应用程序在端口 3000 上运行。所以我需要做的就是更改浏览器中的端口。例如:
编辑:总而言之,您使用“npm run watch”来确保您的应用程序在浏览器中始终是最新的“并且您运行“php artisan serve”将您的应用程序提供给浏览器。您运行这两个命令,但您必须在运行“php artisan serve”命令后使用提供给您的端口。
推荐阅读
- c# - 如何从 GPS Tracker Mini GT06 读取登录信息
- java - 杰克逊:没有找到类的序列化器~~~~~也没有找到创建 BeanSerializer 的属性
- python - `tf.multiply` 和 `*` 有什么区别?
- python - 使用 Python 在 Appium 中滚动
- web-scraping - Scrapy 响应 403 设置 request.dont_filter False
- javascript - 尽管模型中有数据,但回发到表后数据未绑定。我正在使用 asp.net Mvc 执行此操作
- javascript - 在 Node.JS 中使用 JSON 文件作为数组
- python - Python & qtDesigner uic弹窗行编辑访问
- jquery - Woocommerce - Jquery | 根据从选择字段中的选择,从某些结帐输入字段中删除必需的属性
- javascript - 如何使用 selenium java 处理页面加载时出现的警告框