Mock 的艺术

2024-02-14 05:21:48

一、搭建 vue 脚手架

首先，我们需要使用 vue-cli 脚手架搭建一个新的 vue 项目。在命令行中输入以下命令：

vue create my-mock-project

二、安装项目所需要的相关依赖

在项目安装完成后，我们需要安装项目所需要的相关依赖。在命令行中输入以下命令：

npm install --save-dev @vue/cli-plugin-mock

三、在项目根目录下创建 .env.development 文件

接下来，我们需要在项目根目录下创建 .env.development 文件。这个文件将用于存储环境变量。在 .env.development 文件中，我们需要添加以下内容：

VUE_APP_MOCK=true

四、创建 mock 文件

在目录 mock 里面新建 index.js 文件

// mock/index.js
import Mock from 'mockjs'
// 导入json5数据源
import data from './data.json5'

// 使用 Mock.mock() 方法模拟数据
Mock.mock('/api/users', 'get', data.users)

// 导出 Mock 对象
export default Mock

五、创建 json5 数据源文件

接下来，我们需要创建 json5 数据源文件。在目录 mock 中新建 data.json5 文件。在 data.json5 文件中，我们可以添加以下内容：

{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "johndoe@example.com"
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "email": "janedoe@example.com"
    }
  ]
}

六、新建 vue.config.js 配置文件

最后，我们需要新建 vue.config.js 配置文件。在项目根目录下新建 vue.config.js 文件。在 vue.config.js 文件中，我们可以添加以下内容：

module.exports = {
  devServer: {
    // 配置 mock 接口
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // mock 服务的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}

七、发送请求

现在，我们可以启动项目并发送请求来测试我们的 mock 功能。在命令行中输入以下命令：

npm run serve

然后，在浏览器中打开 http://localhost:8080/api/users。如果一切正常，你应该会看到以下结果：

[
  {
    "id": 1,
    "name": "John Doe",
    "email": "johndoe@example.com"
  },
  {
    "id": 2,
    "name": "Jane Doe",
    "email": "janedoe@example.com"
  }
]