手把手教你在项目中使用mockjs模拟接口地址请求数据

Liberty_yes

于 2023-08-30 07:15:00 发布

阅读量900

点赞数

文章标签： mockjs vue vue3

本文链接：https://blog.youkuaiyun.com/Liberty_yes/article/details/132559377

版权

开发中，我们经常会遇到后端接口没开发完，前端开发又需要数据测试的情况，那么我们就可以使用mockjs插件，自己模拟接口请求，废话不多说，直接上步骤：

本文以vue3项目为例

安装mockjs所需插件mockjs和vite-plugin-mock：

npm install mockjs vite-plugin-mock -D

vite.config.ts中，添加配置项,并引入插件：
默认vite.config.ts是直接返回了一个配置对象，这里我们为了传一个参数command，需要改成箭头函数，再return一个配置对象的写法
再plugins中添加如下配置，注意vite-plugin-mock版本号2.9.6如果是最新版本，可能爆红哦！,server表示开发环境使用mock

import {
    viteMockServe } from 'vite-plugin-mock';
export default defineConfig(({
    command }) => {
   
  return {
   
    plugins: [
    vue(),
    createSvgIconsPlugin({
   
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),