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