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