vite가 있는 블레이드 템플릿에서 vue 구성 요소를 로드하는 중 문제 발생

by

larabel 9 및 vuejs 컴포넌트에 문제가 있어 컴포넌트(‘Welcome Main Component.vue’)를 로드하려고 합니다.‘블레이드’는 페이지에 아무것도 렌더링하지 않았습니다.이전에 ‘home.blade’ 페이지에서 모든 컴포넌트를 오류 없이 로드했는데, 이 컴포넌트도 홈에 로드하려고 하면 문제없이 표시됩니다.콘솔에 오류가 표시되지 않아 문제를 파악할 수 없습니다.제안해 주실 수 있나요?

환영해.블레이드:

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url('css/welcome.css') }}">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- import app.js -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body class="">
<div id="app">
@if (Route::has('login'))
 <div class="d-flex justify-content-between px-2">

<div>logo</div>

<div class="mt-3">

@auth

 <a class="m-3 button-welcome" href="{{ url('/home') }}">Home</a>

@else

 <a href="{{ route('login') }}" class="mx-3 button-welcome">sign in</a>


@if (Route::has('register'))


<a href="{{ route('register') }}" class="button-welcome">register</a>

 @endif

@endauth

</div>
 </div>
@endif
</div>
<welcome-main-component/>
</body>
</html>

app.filename:

import './bootstrap'; import { createApp } from 'vue';
const app = createApp({});
import RootComponent from './components/RootComponent.vue'; app.component('example-component', RootComponent); import ProfileComponent from './components/ProfileImageComponent.vue' app.component('profile-image-component', ProfileComponent)
import WelcomeMainComponent from './components/WelcomeMainComponent.vue'; app.component('welcome-main-component', WelcomeMainComponent);
Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
app.component(path.split('/').pop().replace(/.w+$/, ''), definition.default); });
app.mount('#app');


질문에 대한 답변



드디어 해결했습니다. 문제는 메인 div에 앱을 탑재하는 것이었습니다.이것을 본문으로 대체하면 모든 것이 오류 없이 표시됩니다.

 <body id="app">
<div id="">
...
</div>
</body>