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

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

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    //指定开发服务器端口
    port: 9999,
    // 服务器代理
    proxy: {
      // 选项写法
      "/api": {
        target: "http://localhost:3000", // 通过本地服务器将你的请求转发到3000端口（json-server的端口）
        changeOrigin: true, // 设置这个参数可以避免跨域
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

2. 安装mockjs

首先安装 mock.js，由于只用于开发环境使用，所以执行如下命令安装：

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 中将接口导入，这样在项目中任意组件内都可以请求这些接口了。 main.js编辑如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// 引入mock文件
import "./mock"; // mock 方式，正式发布时，注释掉该处即可

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");