Laravel / Vue：无法在刀片模板中加载 vue 组件答案

【问题标题】：Laravel / Vue : unable to load vue component in blade tmeplateLaravel / Vue：无法在刀片模板中加载 vue 组件
【发布时间】：2021-11-27 13:35:45
【问题描述】：

我是 Laravel 和 Vue 的新手，并试图在我的刀片模板中包含一个组件，如下所示

下面是我的 app.js

require('./bootstrap');
window.Vue= require('vue');
Vue.component('Home',require('./components/home.vue').default);

webpack.min.js

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

Home.vue 里面resources/js/components/home.vue

<template>
    <div class="home">Hello from home</div>
</template>

在我的刀片模板中，我已经加载了 app.js 并添加了如下组件

 <body class="antialiased">
        <Home></Home>
 </body>

现在，当我尝试编译 npm run dev 或 npm watch 时，会出现以下错误

./resources/js/components/home.vue 中的错误 1:0 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件文件。见https://webpack.js.org/concepts#loaders

|你好从家|

webpack 编译时出现 1 个错误

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： laravel vue.js webpack

【解决方案1】：

如果您显示了完整的 home.vue 文件，则缺少导出的脚本部分：

<template>
    <div class="home">Hello from home</div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

或者也可能与这一行有关：

mix.js('resources/js/app.js', 'public/js')

您应该尝试：

mix.js('resources/js/app.js', 'public/js').vue()

【讨论】：