标签:yar yarn 安装 console lang 使用 rev 数据 false efault
在 Vite2 与 Vue3 中使用Mockjs
时有一些官方文档没有提到的注意点,特意做此记录。
# 使用 npm 安装
npm install mockjs vite-plugin-mock cross-env -D
# 使用 yarn 安装
yarn add mockjs vite-plugin-mock cross-env -D
package.json
中设置环境变量{
"scripts": {
// 修改dev构建脚本的命令
"dev": "cross-env NODE_ENV=development vite",
"build": "vite build",
"serve": "vite preview"
}
}
vite.config.js
中添加 mockjs 插件import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
vue(),
viteMockServe({
supportTs: false
})
],
});
mock
文件夹,在其中创建需要的数据接口// 仅做示例: 通过GET请求返回一个名字数组
export default [
{
url: "/api/getUsers",
method: "get",
response: () => {
return {
code: 0,
message: "ok",
data: ["tom", "jerry"],
};
},
},
];
fetch("/api/getUsers")
.then(response => {
response.json()
})
.then(data => {
console.log(data)
})
会得到如下返回值:
{
code: 0,
data: {
0: "tom",
1: "jerry",
},
length: 2,
message: "ok"
}
至此,我们就完成了mockjs的配置。
标签:yar yarn 安装 console lang 使用 rev 数据 false efault
原文地址:https://www.cnblogs.com/wdyyy/p/mockjs_vite2.html