VueJs 组件未显示在页面中（使用 Laravel 框架）答案

【问题标题】：VueJs component not showing in page (using Laravel framework)VueJs 组件未显示在页面中（使用 Laravel 框架）
【发布时间】：2020-10-19 22:04:14
【问题描述】：

我按照 Laravel 教程安装和使用 VueJs

我安装了：

composer require laravel/ui
php artisan ui bootstrap
php artisan ui vue
npm install

我全部编译：（编译正常，没有错误）

npm run dev

代码：

资源/js/app.js

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

resources/js/components/ExampleComponent.vue

<template>
    example from laravel
</template>

资源/视图/layout.blade.php

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

<body>
    <example-component></example-component>
</body>

我是否缺少某些配置？我不知道我还需要做什么。

页面加载正常我可以看到页面，我可以编写 html/css 进行可视化，但我看不到 Vue 组件。

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你可以试试这个：

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

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

【讨论】：

【解决方案2】：

你的app.js文件是这样的吗

require('./bootstrap');

    window.Vue = require('vue');

    Vue.component('Example', require('./components/Example.vue'));

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

另外，尝试将 app.js 添加到页面底部

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

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

</body>

【讨论】：

是的，我的 app.js 就像你展示的那样。我尝试在最后添加脚本也没有真正帮助:(我似乎找不到解决方案
如果我对代码库有一个整体的看法，我可以为您提供更好的帮助。
任何你特别需要的东西我都可以在这里添加。我只是认为大部分代码是不必要的。

【解决方案3】：

我想你正在使用 Chrome？你禁用缓存了吗？如果没有：打开开发工具并在开发工具打开时禁用缓存（快速谷歌搜索为您提供了许多如何操作的链接），重新加载 - 组件将在那里。

并确保您已将组件包装在 #app div 上。

如果这不起作用...向我们展示 app.js、component.js 以及刀片模板。

【讨论】：

【解决方案4】：

尝试从以下位置更改脚本资产：

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

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

</body>

到

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

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

</body>

当我遇到这个问题时它对我有用

【讨论】：