參考官方文檔：https://webpack.js.org/configuration/dev-server/
1.在config文件夾編寫mock.config.js來編寫mock中間件
const fs = require('fs');
const path = require('path');
function response(res, content, type = 'json') {
res.type(type);
res.write(content);
res.end();
}
function mock(res, file) {
fs.readFile(file, 'utf8', (error, content) => {
if (error) {
response(res, error.message, 'html');
}
response(res, content, 'json');
});
}
const mockMiddleware = (config) => (req, res, next) => {
const { projectDir, mockDir } = config;
if (['.html', '.css', '.js', '.png', '.jpg'].indexOf(path.extname(req.path)) > -1) {
return next();
}
const filePath = path.resolve(projectDir, `./${mockDir + req.path}.json`);
console.log('filePath', filePath);
return fs.stat(filePath, (error) => {
if (error) {
next();
} else {
mock(res, filePath);
}
});
};
module.exports = mockMiddleware;
2.在webpack.dev.config.js中添加devServer中間件
devServer: {
contentBase: path.join(__dirname, '.'),
historyApiFallback: false,
hot: false,
host: '0.0.0.0',
port: PORT,
before(app) {
const projectDir = path.resolve();
const mockDir = './mock';
app.use(mockMiddleware({ projectDir, mockDir }));
},
},
- 編寫本地mock數(shù)據(jù)
例如：
mock->students->studentA.json
{
"age": 18,
"status": "success",
"grade": {
"English": 99,
"Math": 92
}
}
- 獲取mock數(shù)據(jù)
axios.get('/students/studentA').then((res) => {
console.log('res', res.data);
}).catch((error) => {
console.log(error);
});
