1. 前言
- 好不容易把vue/cli升级到5X,发现之前的mock写法不能用了
- 各种搜索没有找到答案,都是低版本的
vue/cli配置,压根没几个vue/cli5x的配置- 最后还是在webpack官网 找到答案
- 记录一下,防止失联
- 文中也会有
4x脚手架的mock配置
2. 直接上 vue/cli5x 的mock配置
- vue.config.js
const { defineConfig } = require('@vue/cli-service') const path = require('path'); function resolve(dir){ return path.join(__dirname,dir); } module.exports = defineConfig({ chainWebpack:(config)=>{ config.resolve.alias .set('@c',resolve('src/components')) .set('@a',resolve('src/assets')) }, 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:"错误"}) }); } }, })
onAfterSetupMiddleware
提供服务器内部在所有其他中间件之后执行 自定义中间件的能力onBeforeSetupMiddleware
提供在服务器内部执行所有其他中间件之前执行自定义中间件的能力。 这可以用来定义自定义处理程序
3. 使用
- 页面使用
- 接口/路径保持一致就行
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配置
- 低于
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: "成功" }) }) } }
before: require('./mock/mock-server.js'),也可以直接引入单独的mock文件
// before: require('./mock/mock-server.js'),
- 单独的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使用
- 页面使用
// 模拟 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. 后记
- 兴趣是最好的老师
