如何在我的项目上设置惯性，当我尝试加载登录页面时出现错误
Posted
技术标签:
【中文标题】如何在我的项目上设置惯性，当我尝试加载登录页面时出现错误【英文标题】：How to setup inertia on my project, gives me an error when I try and load the login page 【发布时间】：2020-01-27 22:49:53 【问题描述】：我正在尝试设置 Inertia 以在我的 Laravel 项目中使用，但它给了我错误？我的错在哪里？
我用这个命令安装了 Inertia
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，显示为this<div id="app" data-page="<?php echo e(json_encode($page)); ?>"></div>
我做错了什么？
【问题讨论】：
你有像inertia/vue这样的前端适配器吗？
@CaddyDZ 这是我安装的github.com/inertiajs/inertia-laravel/tree/v0.1.3
你还需要一个前端适配器，比如github.com/inertiajs/inertia-vue
@CaddyDZ 我现在已经安装了它，它并没有给我那个错误，但现在我得到一个空白页？而不是我在 Auth\Login.vue 中的登录表单
你还需要在webpack中进行设置才能使用它
【参考方案1】：
@inertiablade 指令正在工作但未呈现，因为您需要安装前端适配器
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)
【讨论】：
我试过这个并得到这个错误：未捕获的错误：找不到模块'./Auth/Login.vue' 您的Auth\Login.vue 登录表单在哪里？请完整路径
我修复了它，我已经修复了路由问题我有这样的登录资源/js/Pages/Auth/Login.vue，所以我在 app.js 中更改了 resolveComponent，如下所示：resolveComponent: name => import(@/Pages/$name).then(module => module.default),
太棒了，很高兴我能帮上忙，如果它解决了您的问题，请考虑接受答案
如果我想实现 Element-ui 我会这样做吗？以上是关于如何在我的项目上设置惯性，当我尝试加载登录页面时出现错误的主要内容，如果未能解决你的问题，请参考以下文章
Spring Boot Security 自定义登录页面未加载
登录responsinator.com时出现“页面因不活动而过期。请刷新并重试”
尝试实现登录时出现 ArgumentException（ASP.NET Core 项目）
如果 maxSessionsPreventsLogin 设置为 true 并且某些使用我的登录凭据的用户尝试登录，如何在我的 thymelaf 登录页面中显示错误？