React生产环境下使用mock.js
最近项目中有个需求,甲方要求在生产环境中使用mock.js数据展示前端项目，因为后端接口暂时没有。我的项目是通过vite构建的，前端项目在打包后一般不会将mock代码数据打包到dist文件夹中进而也不会调用mock数据，所以导致前端项目部署到nginx上后接口全部都报错。
1.项目下载依赖
npm install mockjs
npm install vite-plugin-mock
2.修改vite.config.js文件
viteMockServe({
mockPath: './mock', // 使用相对路径
localEnabled: command === 'serve', // 保证开发阶段可以使用mock接口
prodEnabled: true, // 保证生产阶段也可以使用mock接口
watchFiles: true, // 监听 mock 文件变化
logger: true, // 启用日志输出
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
`,
injectFile:path.resolve('./src/main.jsx')
}),
],3.项目根目录创建mockProdServer.js
// mockProdServer.js
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import homeModule from './mock/home';
export function setupProdMockServer() {
createProdMockServer([...homeModule]);
}4.项目根目录mock/home.js文件代码
//用户数据
const userList = [
{
userId: 1,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'admin',
password: '111111',
token: 'Admin Token',
examLink:'https://www.baidu.com/',
},
{
userId: 2,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'system',
password: '111111',
token: 'System Token',
examLink:'https://www.baidu.com/',
},
]
// 课程章节数据
// 菜单项务必填写 key label 是必须的 key 不能重复
const chapterList = [
{
label: '第一节', key: '1', children: [
{
key: '1-1',
label: '第一节第一课时',
},
{
key: '1-2',
label: '第一节第二课时',
},
]
},
{
label: '第二节', key: '2', children: [
{
key: '2-1',
label: '第二节第一课时',
},
{
key: '2-2',
label: '第二节第二课时',
},
]
},
{
label: '第三节',
key: '3',
children: [
{
key: '3-1',
label: '第三节第一课时',
},
{
key: '3-2',
label: '第三节第二课时',
},
],
},
{
label: '第四节',
key: '4',
children: [
{
key: '4-1',
label: '第四节第一课时',
},
{
key: '4-2',
label: '第四节第二课时',
},
],
},
{
label: '第五节',
key: '5',
children: [
{
key: '5-1',
label: '第五节第一课时',
},
{
key: '5-2',
label: '第五节第二课时',
},
],
},
]
//推荐内容
const recommendList = [
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 1',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 2',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 3',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
},
{
avatar: 'https://joeschmoe.io/api/v1/random',
title: 'Ant Design Title 4',
description: 'Ant Design, a design...'
}
]
//课程内容 key对应章节key
const courseContent = [
{
key:'1-1',
pdfUrl:'/test.pdf',
videoUrl:'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
},
{
key:'1-2',
pdfUrl:'/test1.pdf',
videoUrl:'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
},
{
key:'2-1',
pdfUrl:'/test.pdf',
videoUrl:'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
},
]
export default [
// 获取用户信息
{
url: '/api/user/info',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
//查看用户信息是否包含有次token用户
const checkUser = userList.find((item) => item.token === token)
//没有返回失败的信息
if (!checkUser) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
//如果有返回成功信息
return { code: 200, data: { checkUser } }
},
},
// 获取课程章节
{
url: '/api/chapter/list',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
if (!token) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
return { code: 200, data: { chapterList } }
},
},
// 获取推荐内容
{
url: '/api/recommend/list',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
if (!token) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
return { code: 200, data: { recommendList } }
},
},
// 获取课程内容
{
url: '/api/course/content',
method: 'post',
response: (request) => {
//获取请求头携带token
const token = request.headers.token;
const { key } = request.body;
if (!token) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
const contentObj = courseContent.find(
(item) => item.key === key,
)
return { code: 200, data: { contentObj } }
},
}
]5.项目main.jsx
import {setupProdMockServer} from '../mockProdServer'
setupProdMockServer()这样在运行npm run build后项目部署到nginx上后接口在请求mock数据后接口依然可以获取到数据