最近项目中有个需求,甲方要求在生产环境中使用mock.js数据展示前端项目，因为后端接口暂时没有。我的项目是通过vite构建的，前端项目在打包后一般不会将mock代码数据打包到dist文件夹中进而也不会调用mock数据，所以导致前端项目部署到nginx上后接口全部都报错。

1.项目下载依赖

npm install mockjs

npm install vite-plugin-mock

2.修改vite.config.js文件

javascript">      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

javascript">// mockProdServer.js
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import homeModule from './mock/home';export function setupProdMockServer() {createProdMockServer([...homeModule]);
}

4.项目根目录mock/home.js文件代码

javascript">//用户数据
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) => {//获取请求头携带tokenconst 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) => {//获取请求头携带tokenconst token = request.headers.token;if (!token) {return { code: 201, data: { message: '获取用户信息失败' } }}return { code: 200, data: { chapterList } }},},// 获取推荐内容{url: '/api/recommend/list',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;if (!token) {return { code: 201, data: { message: '获取用户信息失败' } }}return { code: 200, data: { recommendList } }},},// 获取课程内容{url: '/api/course/content',method: 'post',response: (request) => {//获取请求头携带tokenconst 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

javascript">import {setupProdMockServer} from '../mockProdServer'
setupProdMockServer()

这样在运行npm run build后项目部署到nginx上后接口在请求mock数据后接口依然可以获取到数据