Vue-loader failed to load

I created vue.config.js, according to the latest configuration of vue-loader, but ran the error
plus.js, in my console.log vue-loader found that test:/.vue$/ was url-loader.
Why?
how to modify it?

in addition, why does the first rule loader of rules load incorrectly? Is it a file directory string? And this file cannot be loaded

{ loader:
   "D:\\svn\\LiveHome\\LiveHomeNewDiy\\node_modules\\@vue\\cli-service\\node_modules\\vue-loader\\lib\\loaders\\pitcher.js",
  resourceQuery: [Function: resourceQuery],
  options:
   { cacheDirectory:
      "D:\\svn\\LiveHome\\LiveHomeNewDiy\\node_modules\\.cache\\vue-loader",
     cacheIdentifier: "2118ec2c" } }

Note: all dependencies are updated to the latest

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

vue.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");


module.exports = {
    productionSourceMap: false,

    baseUrl: "./",
    // chainWebpack: config => {
    //     const vueRule = config.module.rule("vue");
    //     vueRule
    //         .use("iview-loader")
    //         .loader("iview-loader");
    // },
    configureWebpack: {
        module: {
            rules: [{
                test: /\.vue$/,
                loader: "vue-loader",
                // use: ["vue-loader", {
                //     loader: "iview-loader",
                //     options: {
                //         prefix: false
                //     }
                // }]
            },
                // {
                //     test: /\.less$/,
                //     use: ["vue-style-loader", "css-loader", "less-loader"]
                // },
                // {
                //     test: /\.js$/,
                //     loader: "babel-loader",
                //     exclude: file =>
                //         /node_modules/.test(file) && !/\.vue\.js/.test(file)
                // },
                // {
                //     test: /\.css$/,
                //     use: [
                //         "vue-style-loader",
                //         {
                //             loader: "css-loader",
                //             options: {
                //                 importLoaders: 1
                //             }
                //         },
                //         "postcss-loader"
                //     ]
                // },
                // {
                //     test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                //     loader: "url-loader?limit=1024"
                // }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: "./index_prod.html",
                template: "./src/template/index.ejs",
                inject: false
            }),
            new VueLoaderPlugin(),
        ],


        // resolve: {
        //     extensions: [".js", ".vue"],
        //     alias: {
        //         // "vue$": "vue/dist/vue.esm.js"
        //     }
        // }
    },
    devServer: {
        open: false,
        host: "127.0.0.1",
        port: 3082,
        proxy: {
            "/apis": {
                target: "http://192.168.0.224:18090", // 
                ws: true,
                changeOrigin: true // 
            }
        }
    }
};

package.js

 "dependencies": {
    "awe-dnd": "^0.3.1",
    "axios": "^0.18.0",
    "iview": "^3.1.5",
    "lodash": "^4.17.11",
    "vue": "^2.5.17",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.1",
    "@vue/cli-service": "^3.2.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-plugin-vue": "^4.7.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "iview-loader": "^1.2.2",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue-cli-plugin-iview": "^1.0.6",
    "vue-hot-reload-api": "^2.3.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.1",
    "webpack-chain": "^5.0.1",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  },
Mar.10,2022

test: /\.vue$/,
loader: "vue-loader"

change the loader here to use . In the version configuration after webpack4, you are required to use the use attribute to simply configure loader

.

what happened to the landlord? I also encountered this problem and solved the problem of not


I reduced the devDependencies in package.json to

"devDependencies": {
  "@babel/cli": "^7.1.5",
  "@babel/core": "^7.1.6",
  "@babel/polyfill": "^7.0.0",
  "@babel/preset-env": "^7.1.6",
  "@vue/cli-plugin-babel": "^3.2.0",
  "@vue/cli-plugin-eslint": "^3.2.1",
  "@vue/cli-service": "^3.2.0",
  "eslint": "^5.9.0",
  "eslint-plugin-vue": "^4.7.1",
  "less": "^3.9.0",
  "less-loader": "^4.1.0",
  "vue-cli-plugin-iview": "^1.0.6",
  "vue-template-compiler": "^2.5.17"
}

and then that's it. Hilarious!

Menu