Vue js 无法在 Laravel 5.4 中渲染组件
Posted
技术标签:
【中文标题】Vue js 无法在 Laravel 5.4 中渲染组件【英文标题】：Vue js fails to render the component in Laravel 5.4 【发布时间】：2017-10-24 16:48:56 【问题描述】：我是 laravel 和 VUe js 的新手，在全新安装 laravel 5.4 后，它附带了一个示例 vue 组件，它试图在刀片文件中呈现但它失败了
在文件夹resources/assets/js/components/Example.vue 我有
<template>
<div class="container">
Testing component
</div>
</template>
<script>
export default
mounted()
console.log('Component mounted.')
</script>
然后是我的文件夹resources/assets/js/app.js
Vue.component('example', require('./components/Example.vue'));
const app = new Vue(
el: '#app'
);
然后在welcome.blade.php我有
<div id="app">
<example></example>
</div>
上面的组件没有渲染，我也跑了
npm run watch
我哪里错了？
【问题讨论】：
<div id="app" - 用>关闭它
这是 *** 中的拼写错误，但在代码中它已关闭
jsfiddle.net/wostex/63t082p2/65 代码本身工作正常。尝试不需要组件，但 import 像这样：import Example from './.../Example.vue' 并将组件声明为 Vue.component('example', Example)
如果您使用的是 chrome 浏览器，那么您可以安装 chrome 扩展程序 Vue.js devtools 来找出问题所在。 chrome.google.com/webstore/detail/vuejs-devtools/…
感谢 wostex 我发现原因是因为当使用默认的welcome.blade.php 时，它不包含包含已编译app.js 文件的布局文件，运行make:auth 现在它可以工作了
【参考方案1】：
所以对于这个问题的未来访问者来说，问题是 vue.js 没有加载到编写代码的页面上。因此，请务必检查是否将库加载到需要它们的位置。
【讨论】：
【参考方案2】：我在这个特定的例子中遇到了同样的问题。我发现在 VueJS 需要的默认 welcome.blade.php 文件中，VueJS 库不存在。因此我所做的是：
在文件 welcome.blade.php 中添加粗体：
<body>
**<div id="app">**
<div class="flex-center position-ref full-height">
@if (Route::has('login'))
<div class="top-right links">
@auth
<a href=" url('/home') ">Home</a>
@else
<a href=" route('login') ">Login</a>
<a href=" route('register') ">Register</a>
@endauth
</div>
@endif
<div class="content">
<div class="title m-b-md">
SAGACE
</div>
<example></example>
</div>
**</div>**
<!-- Scripts -->
**<script src=" asset('js/app.js') "></script>**
</body>
因此，正如lewis4u 所指出的那样，此视图将可以访问所有组件所在的 app.js，并且现在可以正确呈现。
【讨论】：
以上是关于Vue js 无法在 Laravel 5.4 中渲染组件的主要内容，如果未能解决你的问题，请参考以下文章
我无法在 Laravel 5.4 上测试简单的 vue 示例组件
Vue.js 2.0 Laravel 5.4 将对象传递给应用程序并跨组件全局使用它
Vue 2.x + Laravel 5.4 在资源管理器中不起作用