Menu
I use the latest versions of vue-cli3 webpack4 and vue-loader v15.
I want to configure vue-loader, but there is an 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.
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 called console.log on vue-loader/plugin.js.
rawRules (line-number 27)
There are 20+ rules.
/\.vue$/ matched the second rule.
But the second rule is url-loader?
What do I do?
307
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs): <template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
Before you can use this loader plugin in your app, you will need to configure it to work as a plugin. import Vue from 'vue // import the module import Loading from 'vue-loading-overlay'; import 'vue-loading-overlay/dist/vue-loading. css'; // define the plugin and pass object for config Vue.
Vue CLI is built on top of Webpack and so for beginners, you do not need to know what Webpack is as the Vue CLI has taken care of the configurations with great default presets and you literally need 0 configs to start.
I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack... this is my 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"
]
}
Your webpack.config it seems fine... but just in case, this is my code:
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'
]
}
}
},
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
