laravel - 如何在我的项目上设置惯性,当我尝试加载登录页面时出现错误
问题描述
我正在尝试设置 Inertia 以在我的 Laravel 项目中使用,但它给了我错误?我的错误在哪里?
我用这个命令安装了惯性
composer require inertiajs/inertia-laravel
按照 github 页面上的说明添加@inertia
到我的 app.blade.php 中,如下所示:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="icon" type="image/jpg" href="{{asset("/image/logo2.png")}}">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
@inertia
</body>
</html>
在我的登录控制器中
public function showLoginForm()
{
return Inertia::render('Auth/Login');
}
在我的路线/web.php
Auth::routes();
Route::get('login', 'Auth\LoginController@showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController@login');
这是我得到的错误:
突出显示的行是@inertia
这样显示的
<div id="app" data-page="<?php echo e(json_encode($page)); ?>"></div>
我究竟做错了什么?
解决方案
@inertia
刀片指令正在工作但未呈现,因为您需要安装前端适配器
npm install @inertiajs/inertia @inertiajs/inertia-vue
设置在webpack.mix.js
const mix = require('laravel-mix')
const path = require('path')
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'@': path.resolve('resources/js'),
},
},
})
并在Vue中初始化resources/js/app.js
import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp)
const app = document.getElementById('app')
const pages = {
'Auth/Login': require('./Pages/Auth/Login.vue').default,
}
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => pages[name],
},
}),
}).$mount(app)
推荐阅读
- mongodb - 如何在 mongoDB 中查询该文档?
- go - sorting slice of integer inside a slices
- linear-regression - 回归系数和弹性有什么区别
- c++ - 从 C++ 中的文本文件中按顺序检查用户名和密码
- django - 打开连接时的Django事务?@transaction.commit_manually @transaction.atomic
- c++ - 代码块中的 SDL_ShowSimpleMessageBox 令人困惑的错误、内存不足和未定义的引用
- c# - 使用 Sonarqube 时出现 MacOS Donet 错误“未找到框架“.NETFramework,Version=v3.5”的参考程序集”
- javascript - 如何获取 BigInt 的位数?
- ios - 将 Xamarin.forms iOS 应用程序转换为 Xcode 应用程序
- azure - Azure SSL 证书显示来宾用户错误