laravel npm run watch报错You may need an appropriate loader to handle this file type

laravel结合vue开发watch的时候报错如下:

ERROR in ./resources/assets/js/components/UserNotifications.vue?vue&type=template&id=c0045994&
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <li class="dropdown" v-if="notifications.length">
|     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
|         <span class="glyphicon glyphicon-bell"></span>
 @ ./resources/assets/js/components/UserNotifications.vue 1:0-96
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Paginator.vue?vue&type=template&id=74bc836a&
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
|
| <ul class="pagination" v-if="shouldPaginate">
|     <li v-show="prevUrl">
|         <a href="#" aria-label="Previous" rel="prev" @click.prevent="page--">
 @ ./resources/assets/js/components/Paginator.vue 1:0-88
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Flash.vue?vue&type=style&index=0&lang=css&
Module parse failed: Unexpected token (54:0)
You may need an appropriate loader to handle this file type.
|
|
| .alert-flash {
|     position: fixed;
|     right: 25px;
 @ ./resources/assets/js/components/Flash.vue 4:0-65
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

ERROR in ./resources/assets/js/components/Flash.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
 @ ./resources/assets/js/app.js 16:23-56
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

参考:
https://vue-loader.vuejs.org/zh/migrating.html#%E5%80%BC%E5%BE%97%E6%B3%A8%E6%84%8F%E7%9A%84%E4%B8%8D%E5%85%BC%E5%AE%B9%E5%8F%98%E6%9B%B4

laravel对应更改:

D:\phpStudy\PHPTutorial\WWW\forum\node_modules\laravel-mix\src\builder\WebpackConfig.js

let VueLoaderPlugin = require('vue-loader/lib/plugin');
    buildPlugins() {
        this.webpackConfig.plugins = this.webpackConfig.plugins.concat(
            webpackPlugins(), new VueLoaderPlugin()
        );

        return this;
    }

再次运行run watch即可正常更新。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SHUIPING_YANG

你的鼓励是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值