时间戳

首页 > 解决方案 > Laravel / Vue：无法在刀片模板中加载 vue 组件

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

问题描述

我是 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.vueresources/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 个错误

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

标签： laravelvue.jswebpack

解决方案

如果您显示了完整的 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()

推荐阅读