VueLoaderPlugin Error: No matching use for vue-loader is found

问题

I am using webpack within a Laravel Mix project. When my webpack.config.js looks like this, Webpack works without error:

module.exports = {
    module: {
        rules: [{ test: /\.vue$/, loader: 'vue-loader' }]
    }
}

But when I add VueLoaderPlugin like so:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    module: {
        rules: [{ test: /\.vue$/, loader: 'vue-loader' }]
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ]
}

I get this error:

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.

Which doesn't make sense since I ready have a .vue rule that includes vue-loader. What is the problem here, and how do I resolve it?

回答1:

The Laravel mix setup of yours already loads the VueLoaderPlugin implicitly, so reloading it again causes this error.

From reading their docs, it written that they support .vue file compilation without extra configuration.

If you're still not convinced, check out their internal web pack configuration: https://www.github.com/JeffreyWay/laravel-mix/tree/master/src%2Fcomponents%2FVue.js and notice the use of VueLoaderPlugin.

回答2:

How about rewriting the import in your config file to:
const { VueLoaderPlugin } = require("vue-loader");

来源：https://stackoverflow.com/questions/57929598/vueloaderplugin-error-no-matching-use-for-vue-loader-is-found