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

admin管理员组

文章数量:1530239

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/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即可正常更新。

本文标签： 报错runWatchLaravelnpm