我按照vue-loader的最新配置,创建了vue.config.js,但是运行报错
我console.log vue-loader里的plus.js,发现test:/.vue$/的是url-loader.
请问这是为啥????
怎么修改???
另外,为啥rules 第一个rule loader 加载不正确?是一个文件目录字符串?而且这个文件也加载不了
{ 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' } }
注:所有的依赖都更新到最新了
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"
},
这里的
loader
改成use
试试看,webpack4之后的版本配置里,要求使用use
属性简单配置loader