Laravel - Vue 组件未加载

Question

我有一个包含 Laravel 和 Vue 的网站。 我正在尝试在 Blade 文件中加载一个 Vue 组件，但出了点问题，它没有加载该组件。

`app.js`

Vue.component('people-form-component', require('./components/people/FormComponent.vue'));
                
const app = new Vue({
    el: '#app',
});

索引（ `layouts/base.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <div id="app">
        @yield('content')
    </div>
</body>

</html>

刀刃

@extends('layouts.base')

<people-form-component></people-form-component>

组件

<template>
    <section class="flex justify-center items-center w-full bg-blue-400">
        <div class="w-1/2 bg-white rounded shadow-2xl p-8 m-6">
            <h1 class="block w-full text-center text-gray-800 text-2xl font-bold mb-6">People Form</h1>
            <form action="/" method="post">
                <div class="flex flex-col mb-4">
                    <label class="mb-2 font-bold text-lg text-gray-900" for="name">Name</label>
                    <input class="border py-2 px-3 text-grey-800" type="text" name="name" id="name">
                </div>
                <div class="flex flex-col mb-4">
                    <label class="mb-2 font-bold text-lg text-gray-900" for="last_name">Last Name</label>
                    <input class="border py-2 px-3 text-grey-800" type="text" name="last_name" id="last_name">
                </div>
                <div class="flex flex-col mb-4">
                    <label class="mb-2 font-bold text-lg text-gray-900" for="age">Age</label>
                    <input class="border py-2 px-3 text-grey-800" type="age" name="age" id="age">
                </div>
                <div class="flex flex-col mb-4">
                    <label class="mb-2 font-bold text-lg text-gray-900" for="dni">DNI</label>
                    <input class="border py-2 px-3 text-grey-800" type="dni" name="dni" id="dni">
                </div>
                <div class="flex flex-col mb-4">
                    <label class="mb-2 font-bold text-lg text-gray-900" for="password">Password</label>
                    <input class="border py-2 px-3 text-grey-800" type="password" name="password" id="password">
                </div>
                <button class="block bg-green-400 hover:bg-green-600 text-white uppercase text-lg mx-auto p-6 rounded"
                    type="submit">Save</button>
            </form>
        </div>
    </section>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        store: function () {},
        update: function (id) {}
    }

</script>

有人看到错误是什么吗？ 我是混合这两个框架的新人。

Answer 1

我最好的猜测是，由于 Vue 处理SRS （服务器端渲染）内容的方式，这需要启用运行时编译器：

https://cli.vuejs.org/config/#runtimecompiler

这是因为 Laravel 提供的SRS内容超出了你编译的 Vue 应用程序的范围，即你的组件的自定义 HTML 标签<people-form-component>没有被编译成一个视图，它是由应用程序提供的内容处理的，而是它自己由外部源 (Laravel) 提供服务。

启用运行时编译器配置后，Vue 将在页面加载时扫描 SRS 内容。

侧节点：如果您使用 AJAX 请求 SRS HTML 内容，则需要您编写一些逻辑来触发 Vue 解析响应。

就我个人而言，我从未将 SRS 与 Vue 一起使用，只有 Laravel 作为 API 和 Vue PWA（渐进式 Web 应用程序）。

Laravel - Vue 组件未加载

问题描述

`app.js`

索引（ `layouts/base.blade.php` ）

刀刃

组件

1 个解决方案

解决方案1
0 2021-10-31 12:50:12

Laravel - Vue 组件未加载

问题描述

app.js

索引（ layouts/base.blade.php ）

刀刃

组件

1 个解决方案

解决方案1 0 2021-10-31 12:50:12

`app.js`

索引（ `layouts/base.blade.php` ）

解决方案1
0 2021-10-31 12:50:12