我试图将Vue.js集成到Laravel。但是我面临一个问题。即使我所做的一切都正确，但Vue组件并未显示在我的php刀片中。
app.js代码：
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue').default);
const app = new Vue({
el: '#app',
});
所有php代码在浏览器上都能正常工作，只有vue组件无法显示在我的浏览器上。
我的contact-us.blade中的代码：
<div id="app">
<example></example>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
@extends('layout')
@section('content')
<section class="site-content">
<style>
#map_wrapper {
/*height: 300px;*/
clear: both;
}
#googleMap {
margin-top:0px!important;
/*width: 100%!important;*/
/*height: 100%!important;*/
}
</style>
@if(isset($result['site_key']))
<script src="https://www.google.com/recaptcha/api.js?render={{$result['site_key']}}"></script>
@endif
<div id="map_wrapper">
<div id="googleMap" style="width:100%;height:380px; margin-top:-30px; margin-bottom:30px; "></div>
</div>
<div class="container">
<div class="breadcum-area">
<div class="breadcum-inner">
<h3>@lang('website.Contact Us')</h3>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ URL::to('/')}}">@lang('website.Home')</a></li>
<li class="breadcrumb-item active">@lang('website.Contact Us')</li>
</ol>
</div>
</div>
<div class="contact-area">
<div class="heading">
<h2>@lang('website.Contact Us')</h2>
<hr>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-8">
@if(session()->has('success') )
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
@elseif(session()->has('error') )
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<form name="signup" class="form-validate" enctype="multipart/form-data" action="{{ URL::to('/processContactUs')}}" method="post">
<div class="form-group">
<label for="firstName">@lang('website.Full Name')</label>
<input type="text" class="form-control field-validate" id="name" name="name">
<span class="help-block error-content" hidden>@lang('website.Please enter your name')</span>
</div>
<div class="form-group">
<label for="inputEmail4" class="col-form-label">@lang('website.Email')</label>
<input type="email" class="form-control email-validate" id="inputEmail4" name="email">
<span class="help-block error-content" hidden>@lang('website.Please enter your valid email address')</span>
</div>
<div class="form-group">
<label for="subject" class="col-form-label">@lang('website.Message')</label>
<textarea type="text" class="form-control field-validate" id="message" rows="5" name="message"></textarea>
<span class="help-block error-content" hidden>@lang('website.Please enter your message')</span>
</div>
<div class="button">
<button type="submit" class="btn btn-dark">@lang('website.Send')</button>
</div>
<input type="hidden" id="token" name="token">
</form>
</div>
<div class="col-12 col-md-6 col-lg-4">
<ul class="contact-list">
@if(!empty(trim(settings('company_name'))) || !empty(trim(settings('company_registration_number'))))
<li> <i class="fa fa-id-card-o"></i><span>@if(!empty(trim(settings('company_name')))){{settings('company_name')}}@endif @if(!empty(trim(settings('company_registration_number'))))({{settings('company_registration_number')}})@endif</span> </li>
@endif
<li> <i class="fa fa-map-marker"></i><span>{{settings('address')}} {{settings('city')}} {{settings('state')}}, {{settings('zip')}} {{settings('country')}}</span> </li>
@if(!empty(settings('phone_no')))
<li> <i class="fa fa-phone"></i><span>{{settings('phone_no')}}</span> </li>
@endif
@if(!empty(settings('contact_us_email')))
<li> <i class="fa fa-envelope"></i><span> <a href="mailto:{{settings('contact_us_email')}}">{{settings('contact_us_email')}}</a> </span> </li>
@endif
</ul>
</div>
</div>
</div>
</div>
@if(isset($result['site_key']))
<script>
grecaptcha.ready(function() {
grecaptcha.execute('{{$result['site_key']}}', {action: 'homepage'}).then(function(token) {
document.getElementById("token").value=token;
});
});
</script>
@endif
</section>
@endsection
对于vue文件，我没有对其进行任何更改，它是在创建laravel项目时默认创建的。
示例代码。vue：
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component! testing
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
我尝试了一些在Google上找到的解决方案，例如使用下面列出的命令，但不幸的是，它们都不起作用。
npm install
npm update
del package-lock.json
rd /s /q node_modules
npm cache clear --force
有人发现我在这里犯的错误吗？预先感谢。
答案 0 :(得分：0)
替换此代码
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
具有以下代码
ViewPager可能会解决问题。
答案 1 :(得分：0)