Laravel - Vue 组件未加载
[英]Laravel - Vue component doesn´t load
问题描述
I have a website with Laravel and Vue.
我有一个包含 Laravel 和 Vue 的网站。 I am trying to load a Vue component inside a Blade file, but something is wrong, it doesn't load the component.我正在尝试在 Blade 文件中加载一个 Vue 组件，但出了点问题，它没有加载该组件。
app.js
Vue.component('people-form-component', require('./components/people/FormComponent.vue'));
const app = new Vue({
el: '#app',
});
Index ( layouts/base.blade.php )索引（ 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>
Blade刀刃
@extends('layouts.base')
<people-form-component></people-form-component>
Vue 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>
Doe somebody see what the error is?有人看到错误是什么吗？ I´m little new mixing this two frameworks.我是混合这两个框架的新人。
1 个解决方案
解决方案1
0 2021-10-31 12:50:12
My best guess is that due to the way Vue would work with SRS (Server Side Rendered) content, this would require Runtime Compiler to be enabled:我最好的猜测是，由于 Vue 处理SRS （服务器端渲染）内容的方式，这需要启用运行时编译器：
https://cli.vuejs.org/config/#runtimecompiler https://cli.vuejs.org/config/#runtimecompiler
This is because the SRS content served by Laravel is out of scope of your compiled Vue application, ie the custom HTML tag for your component <people-form-component> is not compiled into a view processed in content served by the application it's self but served by an external source (Laravel).这是因为 Laravel 提供的SRS内容超出了你编译的 Vue 应用程序的范围，即你的组件的自定义 HTML 标签<people-form-component>没有被编译成一个视图，它是由应用程序提供的内容处理的，而是它自己由外部源 (Laravel) 提供服务。
With the runtime compiler configuration enabled, Vue would scan the SRS content on page load.启用运行时编译器配置后，Vue 将在页面加载时扫描 SRS 内容。
Side node: If you are AJAX requesting SRS HTML content, that would require you to write some logic to trigger Vue to parse the response.
Personally I have never used SRS with Vue, only Laravel as an API and Vue PWA's (Progressive Web Applications).就我个人而言，我从未将 SRS 与 Vue 一起使用，只有 Laravel 作为 API 和 Vue PWA（渐进式 Web 应用程序）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.