使用MOCKVUE中 VUE.CONFIG.JS报错OPTIONS HAS AN UNKNOWN PROPERTY ‘BEFORE‘. THESE PROPERTIES ARE VALID

报错原因是webpack4.7+版本已废弃before，更换使用最新方法即可。

话不多说直接上代码：

1、mock相关配置（mock/index.js），这里仅使用 setupMiddlewares 其余旧版级过渡版本方法见官网

// 引入mock
    const Mock = require('mockjs');
    // 数据生成
    var data = Mock.mock({
        id: '@id',
        username: '@cname',
    })
    
    module.exports = function (middlewares, devServer) {
      if (!devServer) throw new Error("webpack-dev-server is not defined");
 　　　　//env文件自行配置吧，不做介绍了 
      if (process.env.MOCK == 'true') {
          /*如果你想在所有其他中间件之前运行一个中间件或者当你从 `onBeforeSetupMiddleware` 配置项迁移时，可以使用 `unshift` 方法*/
          middlewares.unshift({
              name: 'unshift7',
              path: '/unshift7',
              middleware: (req, res) => {
                  res.json('unshift测试')
              }
          });
          // 测试导出mock假数据
          devServer.app.post('/gaga', (_, response) => {
              response.json(data);
          });
  
          /* 如果你想在所有其他中间件之后运行一个中间件或者当你从 `onAfterSetupMiddleware` 配置项迁移时，可以使用 `push` 方法*/
          middlewares.push({
              name: 'push7',
              path: '/push7',
              middleware: (req, res) => {
                  res.json('push测试')
              }
            });
    
            return middlewares;
      }
  }

2、vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
     transpileDependencies: true,
     devServer: {
　　　　　　//这里将原旧版本的before修改一下最新推荐方法即可
         setupMiddlewares:require('./mock/index')
     }
})
//webpack4.7+版本建好后的基础代码

3、vue文件中发起请求(别忘记axios配置)

<template>
      <div>
          1234567
      </div>
  </template>

  <script>
  import axios from 'axios';
  export default {
     name: 'HelloWorld',
     created(){
         axios.get('/unshift7').then(res=>{
             console.log(res);
         })
         axios.post('/gaga').then(res=>{
             console.log(res);
         })
         axios.post('/push7').then(res=>{
             console.log(res);
         })
     }
 }
 </script>

结果：

如有错误请指正，谢谢~~~ 

详细配置请参照：（官网：https://www.webpackjs.com/configuration/dev-server#devserversetupmiddlewares）