在 Laravel 中设置多个 Vue 组件时出现问题

Question

好吧，我的问题是我无法在 Laravel 中设置多个 Vue 组件。当我设置一个时，其中一个加载，但是同时加载两个不加载。

app.js:

require('./bootstrap');

import { createApp } from 'vue'
import Home from './components/Home.vue';
import Offers from './components/Offers.vue';
const app=createApp({});

app.component('home',Home);
app.component('offers',Offers);

app.mount('#app');

welcome.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>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
       <div id="app">
            <Home />
            <Offers />
       </div>
       <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

每个 vue 组件如下所示：

<template>
    <div>
        <p>test</p>
    </div>
</template>

Answer 1

我已经使用 vue-loader 在全新的 Laravel 和 Vue 3 上测试了您的问题。并发现问题与 self-closing 元素有关，请通过更改以下内容查看其是否有效：

   <div id="app">
        <Home />
        <Offers />
   </div>

对此：

   <div id="app">
        <Home></Home>
        <Offers></Offers>
   </div>

不知为什么，self-closing 标签表现为嵌套。它认为 Offers 在 Home

里面

Answer 2

在您的 app.js 中，您使用以下代码声明您的组件：

app.component('home',Home);
app.component('offers',Offers);

如您所见，您将其删除 home 和 offers 小写，因此为了使用这些组件，在 blade 文件中您必须这样使用它：

       <div id="app">
            <home></home>
            <offers></offers>
       </div>

在 Laravel 中设置多个 Vue 组件时出现问题

Problem with setting more than one Vue components in Laravel

laravel

vue.js

vue-component