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数据后接口依然可以获取到数据