Vue3开发时配置使用mock数据

1. vite.config.js配置文件（mockjs和vue代理无关）

注意： mock可以拦截ajax请求，在请求走代理之前就会被拦截（不会在请求后端），所以mockjs只在开发环境中使用。

2. 安装mockjs

首先安装 mock.js，由于只用于开发环境使用，所以执行如下命令安装：
--save-dev代表开发依赖，可简写为 -D

npm install mockjs --save-dev

3. 编写模拟数据接口

• 在 src目录 下创建一个 mock目录 ，然后在里面创建一个 index.js 文件，作为mock各个模块的导出点，供 src/main.js 使用。
• 在src/mock/modules 目录下，创建 xxx.js 规则，模拟各个模块数据，供 mock 使用。
• 这样按模块划分后的目录结构大致如下所示：

├── src
|   ├── mock
|       ├── index.js
|       └── modules  // 各个模块的mock数据
|           ├── user.js
|           ├── article.js
|           └── category.js

3.1. index.js代码如下：

/**
 * 定义本地测试接口，最好与正式接口一致，尽可能减少联调阶段修改的工作量
 */
// 引入mockjs
import Mock from "mockjs";
// 引入模板函数类
import user from "./modules/user";
import article from "./modules/article";
import category from "./modules/category";

const { mock } = Mock; // Mock函数

// 使用拦截规则拦截命中的请求
// mock( url, post/get, 返回的数据/函数（有return值）);
mock("/api/users/login/", "post", user.login);
mock("/api/users/profile/", "get", user.profile);
mock("/api/users/logout/", "post", user.logout);

3.2. user.js代码如下：

import { Random } from "mockjs"; // 导出随机函数

function login(req) {
  // req是一个请求对象，包含: url，type和body属性
  return {
    code: 200,
    data: {
      username: Random.cname(),
      token: Random.guid(),
      message: "Login successfully."
    }
  };
}

function profile(req) {
  return {
    code: 200,
    data: {
      username: Random.cname(),
      age: Random.integer(10, 30),
      date: Random.date(),
      message: ""
    }
  };
}

function logout(req) {
  return {
    code: 200,
    data: {
      message: "Logout successfully."
    }
  };
}

export default {
  login,
  profile,
  logout
};

article.js和category.js代码省略。

4. main.js引入mockjs

模拟好假数据接口之后，我们还要在 main.js 中将接口导入，这样在项目中任意组件内都可以请求这些接口了。 main.js编辑如下：

import { createApp } from 'vue'
import App from './App.vue'

// 引入mock文件
import './mock' // mock 方式，正式发布时，注释掉该处即可
const app = createApp(App)

app.mount('#app')

5. 使用

5.1. 配置axios的baseURL

src/utils/request.js 为axios`的二次封装

// src/utils/request.js
const baseURL = '/api'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

5.2. 封装用户登录的api

src/api/login.js 为登录的api封装

// 引入封装后的axios
import request from "@/utils/request";

/* 用户登录api */
export function login(params) {
  return request({
    url: "/users/login",
    method: "post",
    data: params,
  });
}

5.3. 页面使用

// 引入login的api
import { login } from "@/api/login";


async handleLogin() {
  const res = await login(this.loginForm);
  console.log(res); // 这个res就是mock处理函数返回的数据
},