vue3 门户网站搭建4-mockjs
在后端接口没做好之前,为了更好的模拟接口返回,引入 mockjs。
它可以拦截 ajax 请求,生成伪数据。
1、安装: npm i mokjs -D、npm i vite-plugin-mock -D
2、在 vite.config.js 中引入 viteMockServe,mockPath 即为接口文件存放地址
配置项扩展:
{ supportTs?: boolean; --是否读取ts文件模块,设置为true时不能读取js文件 logger?:boolean; --是否在控制台显示请求日志 mockPath?: string; --设置模拟数据的存储文件夹,如果不是index.js需要写明完整路径 ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件 watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改 localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件,不要在生产环境中打开它.设置为 false 将禁用 mock 功能 ignoreFiles?: string[]; --读取文件时忽略的文件 configPath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时,将首先读取并使用该文件。 配置文件返回一个数组 prodEnabled?: boolean;--设置打包是否启用 mock 功能 injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内,则不管有没有开启,最终的打包都会包含mock.js injectCode?: string;--injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js} }
为了方便接口管理,这里要分为多个文件进行维护,代码注入:
3、_createProductionServer.js:
4、配置接口:(login.js)
5、具体使用:(提前引入了 axios)
6、配置启动使用:
测试请求没问题~
常用方法:
另附 axios :
import axios from "axios"; import { getItem, StorageKey } from '@/utils/storage'; import { ElMessage } from "element-plus"; const service = axios.create({ baseURL: '/', timeout: 10000, withCredentials: true, headers: { token: getItem(StorageKey.token) || '1111', 'Content-Type': 'application/json', } }); // 请求拦截器 service.interceptors.request.use( config => { return config; }, error => { return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { if (response.data.code !== 200) { if (response.data.message) { ElMessage.error(response.data.message); } return Promise.reject(response.data) } return response.data; }, error => { return Promise.reject(error); } ); export default service