一、mock-server-way

这个示例项目，可以用于webpack5环境下的数据模拟（mock），是一个不错的选择.

1、简介

  mock server 是我在 vue-element-admin 中看到的一种用于模拟数据的 新方案

  mock 是完全基于 webpack-dev-serve 来实现的，所以在你启动前端服务的同时，mock-server 就会自动启动，而且这里还通过 chokidar 来观察 mock 文件夹内容的变化。在发生变化时会清除之前注册的 mock-api 接口，重新动态挂载新的接口，从而支持热更新。

  由于是一个真正的 server，所以你可以通过控制台中的 network，清楚的知道接口返回的数据结构。并且同时解决了之前 mockjs 会重写 XMLHttpRequest 对象，导致很多第三方库失效的问题。

2、文件分析

  对原 mock server 内容进行的模块化划分，并将版本从webpack4升级到了webpack5

Warning

webpack5 和 webpack4 相比做了一些调整：将 devServer.before 改为了 devServer.onBeforeSetupMiddleware、将 devServer.overlay 改为了 devServer.client.overlay

├── mock
    ├── index.js
    ├── mock-core # 核心代码
    │   ├── utils.js
    │   ├── mock-XHR.js # --> mock.js封装
    │   └── mock-server.js # --> mock-server封装
    └── modules  # api管理
        ├── cart.js
        └── products.js

3、安装使用

• 安装

npm install mockjs [email protected] [email protected] -D
npm install axios

• 使用

npm run serve

二、vite-plugin-mock-way

这个示例项目，可以用于vite环境下的数据模拟（mock）

1、简介

  vite-plugin-mock 是我在 vue-vben-admin 中看到的一种用于模拟数据的方案。

  根据vite-plugin-mock的描述，它支持本地环境和生产环境，Connect 服务中间件在本地使用，mockjs 在生产环境中使用。

Warning

经过我的亲身测试，vite-plugin-mock 在开发环境下可以到达 mock-server 一样的效果。但生产环境下表现并不如意，官方自己也说了，生产环境下不支持 header 的获取、RESTful 格式参数获取、mock 文件不要使用 node 模块等。除此之外，vite-plugin-mock 在使用时还不可以设置全局的 baseURL（得用代理解决）。并且关于生产环境的相关 issues，官方也没有进行相关 fix。

2、文件分析

  vite-plugin-mock 和前面的 mock-server 使用基本一致，没有什么大的变动。

开发环境使用 vite-plugin-mock、生产环境使用 mockjs

├── mock
    ├── index.js
    ├── mock-core # （用于生产环境）
    │   ├── utils.js
    │   ├── mock-XHR.js
    └── modules  # api管理
        ├── cart.js
        └── products.js

3、安装使用

• 安装

npm install mockjs vite-plugin-mock -D
npm install axios

• 使用

npm run dev