从webpack.config.js切换到vue.config.js，并且VueLoaderPlugin在执行构建时抛出错误

Question

我们正在将vue应用程序切换为使用vue.config.js而不是webpack.config.js，并且在尝试进行vue-cli-service构建时遇到一些问题。我看到的主要错误是：

错误：[VueLoaderPlugin错误]未找到与vue-loader匹配的用途。 确保匹配.vue文件的规则使用了vue-loader。

作为参考，这是我们的package.json，vue.config.js和babel.config.js

我确定vue.config.js中可以清除某些内容，但是忽略其中的一些内容，我相信我们的VueLoaderPlugin应该正确设置，并且可以在webpack.config中使用.js，然后再移至vue.config.js

package.json

{
  "name": "project-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "start-dev": "vue-cli-service serve --mode development",
    "build-dev": "vue-cli-service build --mode development",
    "build-stg": "vue-cli-service build --mode stage --dest dist-stage",
    "build-prod": "vue-cli-service build --mode production --dest dist-prod",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "file-loader": "^3.0.1",
    "jest": "^24.5.0",
    "jest-serializer-vue": "^2.0.2",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue-jest": "^3.0.4",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-merge": "^4.2.1",
    "webpack-serve": "^3.0.0-beta.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "jest": {
    "verbose": true,
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "description": "## Project setup ``` npm install ```",
  "main": "babel.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

vue.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const env = require(process.env.VUE_APP_NODE_ENV === '' ? './.env' : './.env.' + process.env.VUE_APP_NODE_ENV);

const setPath = function(folderName) {
  return path.join(__dirname, folderName);
}

const buildingForLocal = process.env.VUE_APP_NODE_ENV === 'local';

const extractHTML = new HtmlWebpackPlugin({
  title: 'Project',
  filename: 'index.html',
  template: 'public/index.html',
  inject: true,
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
    html5: true,
    minifyCSS: true,
    removeComments: true,
    removeEmptyAttributes: true
  },
  environment: process.env.VUE_APP_NODE_ENV,
  isLocalBuild: buildingForLocal,
  imgPath: (!buildingForLocal) ? 'assets' : 'src/assets'
});

module.exports = {
  publicPath: '/',
  outputDir: buildingForLocal ? path.resolve(__dirname) :     setPath(process.env.VUE_APP_DROP_LOCATION),
  configureWebpack: {
    entry: [
      './src/main.js'
    ],
    output: {
      filename: buildingForLocal ? '[name].js' : '[name].[hash].js'
    },
    resolve: {
      extensions: ['.js', '.vue'],
      alias: {
        vue: buildingForLocal ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              js: 'babel-loader'
            }
          }
        },
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: [{
            loader: "babel-loader",
            options: { presets: ['@babel/preset-env'] }
          }]
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            "css-loader"
          ]
        },
        {
          test: /\.svg$/,
          loader: 'svg-sprite-loader'
        },
        {
          test: /\.(png|jpg|gif)$/,
          loader: 'file-loader',
          query: {
            name: '[name].[ext]?[hash]',
            useRelativePath: buildingForLocal
          }
        }
      ]
    },
    plugins: [
      extractHTML,
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        //filename: "css/styles.[hash].css",
        //chunkFilename: "[id].css"
      }),
      new webpack.DefinePlugin({
        'process.env': env
      }),
      new CleanWebpackPlugin(),
      new VueLoaderPlugin()
    ],
    optimization: {
      splitChunks: false
    },
    mode: buildingForLocal ? 'development' : 'production'
  },
  devServer: {
    historyApiFallback: true,
    noInfo: false
  }
};

babel.config.js

module.exports = {
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", { "targets": { "node": "current" }}]
      ]
    }
  }
}