1. 前言

1. 好不容易把vue/cli升级到5X,发现之前的mock写法不能用了
2. 各种搜索没有找到答案,都是低版本的vue/cli配置,压根没几个vue/cli5x的配置
3. 最后还是在webpack官网 找到答案
4. 记录一下,防止失联
5. 文中也会有4x脚手架的mock配置

---

2. 直接上 vue/cli5x 的mock配置

1. vue.config.js

 devServer: {
    open: true, // 浏览器自动打开,
    // app就是 express 实例  这就是node js的代码
    // mock 造假数据
    onAfterSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }
      devServer.app.get("/play/p", function (req, res) {
        res.json({ code:1000,msg:"成功" });
      });
    },
    onBeforeSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }
      devServer.app.get("/play/y", function (req, res) {
        res.json({code:2000,msg:"错误"})
      });
    }
  },

2. onAfterSetupMiddleware
   提供服务器内部在所有其他中间件之后执行 自定义中间件的能力
3. onBeforeSetupMiddleware
   提供在服务器内部执行所有其他中间件之前执行自定义中间件的能力。 这可以用来定义自定义处理程序

---

3. 使用

1. 页面使用
2. 接口/路径保持一致就行

let res = await fetch("/play/p").then(res=>res.json())
console.log("res1:-----",res);
let res2 = await fetch("/play/y").then(res=>res.json())
console.log("res2:-----",res2);

---

4. 低版本的mock配置

1. 低于 vue/cli 5x的版本

    devServer: {
        open: true, // 浏览器自动打开,
        // app就是 express 实例  这就是node js的代码
        // mock 造假数据
        before(app) {
            app.get("/yzsApi/getData", (req, res) => {
                res.json([{
                    name: "祺祺",
                    age: 5
                }, {
                    name: "少少",
                    age: 3
                }])
            })
            app.post("/yzsApi/login", (req, res) => {
                res.json({
                    msg: "成功"
                })
            })
        }
    }

---

2. before: require('./mock/mock-server.js'),也可以直接引入单独的mock文件

      // before: require('./mock/mock-server.js'),

---

3. 单独的json文件作为返回数据

// mock code
const test = require('../mock/test.json') 
// 如果是post请求，那么将get改为post即可
devServer: {
 ...
 before(app){
 app.get('/api/test', (req, res) => {
  res.json(test)
 }),
 }

---

5. 低版本mock使用

1. 页面使用

// 模拟 Mock 接口的 封装 
export const getData =()=>{
    return http.get("/yzsApi/getData").then(res=>res.data)
}
export const postData =()=>{
    return http.post("/yzsApi/login",{}).then(res=>res.data)
}

---

6. 后记

1. 兴趣是最好的老师

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉