我使用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"
},
```
I console.log vue-loader / plugin.js,rawRules
(第27行)
有20多个规则。
/.vue$/匹配第二条规则。
但是第二个规则是url-loader ???????
我该怎么办?????
答案 0 :(得分:2)
我认为您应该将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'
]
}
}
},
...
答案 1 :(得分:2)
我遇到了同样的问题,发现this thread解决了我的问题。
从本质上讲,使用vue-cli构建应用程序时,不需要为vue-loader指定模块规则或加载程序,因为vue-cli提供了开箱即用的vue-loader。
我不知道为什么在尝试指定模块规则时会收到错误消息,但不幸的是,它给出了这个无用的错误,但是无论如何,我希望这会有所帮助!