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");
