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

巴特西

vue3 门户网站搭建4-mockjs

最新文章

热门文章