Laravel 5 VueJS 不工作答案

【问题标题】：Laravel 5 VueJS not workingLaravel 5 VueJS 不工作
【发布时间】：2018-08-11 20:08:09
【问题描述】：

我正在尝试在我新的 laravel 设置中使用 vuejs。我在命令行中运行以下命令

npm install
npm run dev

此命令运行没有任何错误。当我在模板中导入位于~/ressources/assets/components/ExampleComponent.vue 下的默认 VUE 组件时，什么也没有发生。

@section('content')
    <example-component></example-component>
@endsection

这里是 app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

【问题讨论】：

ExampleComponent 里面有什么不工作的？
来自github.com/laravel/laravel/blob/master/resources/assets/js/…的默认内容

标签： javascript laravel laravel-5 vue.js vuejs2

【解决方案1】：

如果你使用 Laravel Mix 检查你的 webpack.mix.js 文件，默认配置必须是这样的

 mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

现在，看看你是否将 JS 文件链接到你的刀片模板

对于较旧的 Laravel 版本 (

<script src="{{ asset('js/app.js') }}"></script>

并且喜欢这个新的一次（> 5.5）

<script src="{{ mix('js/app.js') }}"></script>

终于看到了

el: '#app'

它的意思是# - id，就像在 CSS 中一样，VueJS 会搜索 id 为 app 的元素。该元素之外的所有内容都将不起作用。

所以你必须像使用它

<div id='app'> 
<example-component></example-component>
</div>

或

<section id='app'> 
    <example-component></example-component>
    </section>

【讨论】：

Laravel 5.7：assets 不见了，根据：[laravel-news.com/laravel-5-7-resources-directory-changes]

【解决方案2】：

我认为你应该用 app id 包装容器 div

<div id="app" > <example-component></example-component> </div>

如果不只是检查Js文件是否正确导入到php文件中

【讨论】：

【解决方案3】：

我也遇到过这个问题，我的解决了。我没有导入

<script src="{{ asset('js/app.js') }}" defer></script>

检查您是否正在导入 js/app.js 和 #app

它应该适合你。

【讨论】：

【解决方案4】：

大声笑，这是一个面罩问题。我已经从布局文件中删除了@yield('content')。很抱歉，坦克寻求帮助！

【讨论】：

【解决方案5】：

检查您是否正在导入 app.js

<script src="{{ asset('js/app.js') }}" defer></script>

【讨论】：