vue-loader：如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15

Posted 2023-02-22

【中文标题】vue-loader：如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15

【英文标题】：vue-loader: how to use vue-loader v15 in webpack 4 and vue-cli3

【发布时间】：2019-05-04 11:54:03

【问题描述】：

我使用最新版本的 vue-cli3 webpack4 和 vue-loader v15。

我想配置vue-loader，但是出现错误：

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: "./",
    configureWebpack: 
        module: 
            rules: [
                test: /\.vue$/,
                loader: "vue-loader"
            ]
        ,
        plugins: [
            new VueLoaderPlugin()
        ]
    

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"
      ,

我在vue-loader/plugin.js 上致电console.log。

rawRules（第 27 行）

有 20 多个规则。 /\.vue$/ 符合第二条规则。

但是第二条规则是 url-loader？

我该怎么办？

【问题讨论】：

我有同样的错误。你找到解决办法了吗？

【参考方案1】：

我认为您应该将 vue-loader 放在依赖项上。最近我更新了我的项目：vue、vue-loader、webpack... 这是我的 package.json

  "name": "pack",
  "private": true,
  "version": "0.0.0",
  "scripts": 
    "build": "webpack --env.prod --config webpack.config.js"
  ,
  "devDependencies": 
    "@babel/preset-env": "^7.0.0-rc.2",
    "@types/webpack-env": "^1.13.5",
    "aspnet-webpack": "^2.0.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "css-loader": "^0.25.0",
    "event-source-polyfill": "^0.0.7",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^2.0.0",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^4.23.1",
    "webpack-hot-middleware": "^2.24.3"
  ,
  "dependencies": 
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "chart.js": "^2.7.3",
    "downloadjs": "^1.4.7",
    "idle-vue": "^2.0.5",
    "jwt-decode": "^2.2.0",
    "material-design-icons-iconfont": "^3.0.3",
    "v-offline": "^1.0.10",
    "vue": "^2.5.21",
    "vue-analytics": "^5.12.2",
    "vue-chartjs": "^3.4.0",
    "vue-chartkick": "^0.5.0",
    "vue-config": "^1.0.0",
    "vue-embed": "^1.0.0",
    "vue-google-charts": "^0.3.2",
    "vue-json-excel": "^0.2.5",
    "vue-loader": "^15.4.2",
    "vue-moment": "^4.0.0",
    "vue-popperjs": "^1.6.1",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.21",
    "vuetify": "^1.3.14"
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

你的 webpack.config 看起来不错……但以防万一，这是我的代码：

var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = 
  mode: 'development',
  context: __dirname,
  entry: 
    main: ['babel-polyfill', './App/index.js']
  ,
  plugins:[
    new VueLoaderPlugin()
  ],
  module: 
    rules: [
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      ,
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          
        
      ,

...

【讨论】：

也许您是对的，但您的webpack 似乎在其他文件中？使用vue-cli，这样的webpack怎么用？

@sdwdjzhy 我的 webpack 文件在根文件夹中

也许我需要搜索 webpack 文档。非常感谢！

【参考方案2】：

我遇到了同样的问题，发现 this thread 解决了我的问题。

本质上，在使用 vue-cli 构建应用程序时，您不需要为 vue-loader 指定模块规则或加载器，因为 vue-cli 提供了开箱即用的 vue-loader。

我不知道为什么我们在尝试指定模块规则时会收到错误，很遗憾它给出了这个无用的错误，但无论如何，我希望这会有所帮助！