Vue 组件未在 InertiaJS 中加载
[英]Vue component not loading in InertiaJS
问题描述
我正在使用 InertiaJS 构建一个 Vue3 / Laravel 应用程序。 当我在浏览器中运行我的应用程序时，它会在控制台中出现以下错误。 我是 InertiaJS 和 Vue3 的新手，不知道为什么我的组件不渲染。
Uncaught (in promise) TypeError: l is null
web.php
// Home route.
Route::get('/', [HomeController::class, 'index'])
HomeController.php
public function index()
{
return Inertia::render('Home');
}
我的 app.blade.php 文件位于./resources/views/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">
<title>@yield('title') - Gainz</title>
<meta
name="description"
content="@yield('description')">
<meta name="google-site-verification" content="n5lVAknL3NblyWPmFzt3ARrtZbDDLIU-KOwA83NiO5w" />
<!-- Roboto -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/css/main.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom scripts -->
<script src="/js/app.js"></script>
</head>
<body onmousedown="handleClick(event)">
@inertia()
@yield('scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix .js('resources/js/app.js', 'public/js').vue()
//.js('resources/js/track.js', 'public/js')
//.js('resources/js/overview.js', 'public/js')
//.js('resources/js/feed.js', 'public/js')
.sass('resources/sass/main.scss', 'public/css');
// @ts-ignore
mix.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
'@': path.resolve('./resources/js'),
},
extensions: ['.js', '.vue', '.json'],
},
devServer: {
allowedHosts: 'all',
},
});
./resources/js/app.js下的app.js
// @ts-nocheck
require('./bootstrap');
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
// Creates the inertia vue app.
createInertiaApp({
resolve: (name) => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
// Progress bar.
InertiaProgress.init()
最后是 Home.vue 下的 ./resources/js/Pages/Home.vue
<template>
<div>Hello world</div>
</template>
1 个解决方案
解决方案1
0 2022-01-24 17:15:45
将 defer 属性添加到 app.blade.php 中的 app.js 的脚本标签似乎已经解决了这个问题。
<!-- Custom scripts -->
<script src="{{ mix('/js/app.js') }}" defer></script>
Vue加载组件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.