vue-loader加载失败

帅动的笑脸
  • 17

我按照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"
  },
回复
阅读 8.7k
3 个回答
test: /\.vue$/,
loader: "vue-loader"

这里的loader改成use试试看,webpack4之后的版本配置里,要求使用use属性简单配置loader

MrOldK
  • 2
新手上路,请多包涵

楼主咋样了 我也碰到这个问题,解决了不

我将package.json 里的devDependencies减少到

"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",
  "eslint": "^5.9.0",
  "eslint-plugin-vue": "^4.7.1",
  "less": "^3.9.0",
  "less-loader": "^4.1.0",
  "vue-cli-plugin-iview": "^1.0.6",
  "vue-template-compiler": "^2.5.17"
}

然后就行了 笑死人了!!!!

宣传栏