网站建设 seo,俄语网站推广,免费软件如何盈利,设计网站的方法文章目录 操作步骤1. 安装 mockjs 和 vite-plugin-mock2. 安装 axios3. 创建mock路径4. 配置 viteMockConfig5. 编写第一个mock接口6. 创建 createProdMockServer7. 配置 axios8. 编写请求接口9. 在页面中使用 操作步骤
1. 安装 mockjs 和 vite-plugin-mock vite-plugin-mock … 文章目录 操作步骤1. 安装 mockjs 和 vite-plugin-mock2. 安装 axios3. 创建mock路径4. 配置 viteMockConfig5. 编写第一个mock接口6. 创建 createProdMockServer7. 配置 axios8. 编写请求接口9. 在页面中使用 操作步骤
1. 安装 mockjs 和 vite-plugin-mock vite-plugin-mock 是 vite 提供的mock插件配合mockjs 一起使用比较方便。 npm install mockjs vite-plugin-mock2.9.62. 安装 axios 通过axios发送请求请求到mock的模拟接口 npm install axios3. 创建mock路径
在 src 文件夹下创建 mock 文件夹作为后续编写mock接口的路径
4. 配置 viteMockConfig 在 vite.config.js 中配置 viteMockConfig mockPath 就是mock文件夹的路径 import { defineConfig } from vite
import {viteMockServe} from vite-plugin-mock// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),viteMockServe({mockPath: ./src/mock})],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}}
})5. 编写第一个mock接口
在mock文件夹下新建一个 js 文件如user.js ,作为专门编写与用户相关的接口数据,内容如下
export default[{url: /mock/user/test,method: get,response: () {return {code: 200,msg: ok,data: hello world}}}
]该文件创建了一个模拟接口地址为/mock/user/test
6. 创建 createProdMockServer
在mock文件夹下创建一个index.js 文件内容如下
import {createProdMockServer} from vite-plugin-mock/es/createProdMockServer
// 导入上面写的user.js
import userModule from ./userexport function setupProdMockServer(){createProdMockServer([...userModule])
}7. 配置 axios
创建 src/utils/system/request.js 文件用来全局配置axios内容如下
// 在这个文件中配置axios,以及拦截请求
import axios from axios// const baseURL import.meta.env.VITE_BASE_URLconst service axios.create({bbaseURL: /mock,timeout: 5000
})// 拦截器错误处理配置export default service8. 编写请求接口
创建src/api/user.js 文件作为请求用户相关数据的文件内容如下
// 导入配置过的 axios
import request from /utils/system/requestexport function loginApi(data){return request({url: /user/test,method: get,baseURL: /mock,data})
}该文件创建了一个请求接口loginAPi 用来请求之前创建的mock接口地址
9. 在页面中使用
首先在需要的页面导入请求的接口
import { loginApi } from ../../api/user.js;然后以Promise的形式使用
onMounted(() {loginApi({}).then(res {console.log(res)})
})如果控制台打印出结果则说明配置成功
