vue3使用mockjs本地调试

最新推荐文章于 2024-08-14 20:05:25 发布

Zang_WS

最新推荐文章于 2024-08-14 20:05:25 发布

阅读量377

点赞数

分类专栏：前端笔记文章标签： vue.js javascript npm

本文链接：https://blog.csdn.net/weixin_41759744/article/details/125278661

版权

前端笔记专栏收录该内容

21 篇文章 6 订阅

订阅专栏

1.安装mock依赖

npm install mockjs
npm install vite-plugin-mock

2.在src目录下创建mock目录文件夹，并创建index.js


export default [
  {
    type: 'get',
    url: '/api/getDemo',
    response: () => {
      return [{name: 'qqwqw', text: '1212awq'}]
    }
  }
]

3.在vite.config.js中添加

import { viteMockServe } from 'vite-plugin-mock'
 
export default defineConfig((command) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        supportTs:false,
        logger: false,
        mockPath: "./src/mock/"  //你自己创建的mock文件夹路径
      })
    ]
  }
})

4.修改axios的baseUrl为/api

const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL, // api的base_url 改成成本地的地址如localhost:8090或者为空
  timeout: 15000, // 请求超时时间
  validateStatus: function(status) {
    return status >= 200 // 默认的
  }
})

5.在项目中使用