vue中想要mock数据在线上环境生效如何操作
作者：孙怼怼啊
本文主要介绍了在配置了mock数据之后在线上环境使用,主要通过在main.ts文件中注册和vite.config.ts文件夹中配置插件来实现,感兴趣的可以了解一下
一般情况下，在没有后端配合的时候，我们前端又想模拟接口请求，获得数据，那我们可以选择本地创建json假数据，或者使用mock来模拟请求的过程以及拿到接口返回的结果。
问题一般情况下，在配置了mock数据之后呢，只能是在本地启动服务器的时候生效，到了部署服务器上面之后，就会发现这个mock数据是没有效果的，那么如何来配置线上环境的mock数据呢
解决方案
做一下几个步骤，按照规定规则来配置即可第一步这里我列出了配置mock数据的几个关键的步骤
// 这里vue3自带的mock插件
import { MockMethod } from "vite-plugin-mock";
// 性别--这里配置的是一个准备返回的mock数据
const sexList = [
{
id: 1111,
parentId: 0,
treeLabel: "性别"
},
{
id: 1,
parentId: 1111,
treeLabel: "男"
},
{
id: 2,
parentId: 1111,
treeLabel: "女"
}
];
// 接下啦需要导出封装的mock请求
export default [
{
url: "/informationEnterTree",
method: "get",
response: () => {
return {
success: true,
data: informationEnterTree
};
}
},
] as MockMethod[];
然后需要再main.ts文件中注册一下
// 这里导入的是我们刚刚在mock文件夹下封装的请求文件夹
import { setupProdMockServer } from "../mock/_createProductionServer";
setupProdMockServer();
最后需要再vite.config.ts文件夹中配置一下插件
import { viteMockServe } from "vite-plugin-mock";
plugins: [
viteMockServe({
supportTs: false,
logger: false,
prodEnabled: true,
watchFiles: true,
mockPath: "./mock/prodMock",
injectCode: `
import { setupProdMockServer } from '../mock/_createProductionServer'
setupProdMockServer()
`,
injectFile: resolve("./src/main.ts")
// })
],
到此为止，mock数据就可以在线上环境使用了,更多相关vue mock线上环境操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！