vite + vue + mockjs

安装mockjs

yarn add  mockjs vite-plugin-mock
复制代码

1. 只在开发环境用mockjs

1.1 方式一

/src/mock/index.js

import Mock from 'mockjs';
Mock.mock(/\/api\/user/, "get", {
  code: 200, 
  data: {
    id: 123,
    username:"123"
  },
})
复制代码

1.2 方式二

/src/mock/index.js

import Mock from 'mockjs';
import type  { MockMethod } from "vite-plugin-mock"
// TypeScrip中引入
// import type { MockMethod } from "vite-plugin-mock"
export default [
    {
        url: '/api/user', // 注意，这里只能是string格式
        method: 'get', 
        response: ( ) => {  
            return {
                code:200,
                msg:"ok",
                data: () => { 
                    id: 123,
                    username:"123"
                } 
            }
        }
    }
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档
复制代码

vite.config.js

import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock' 
export default defineConfig({
     plugins: [ viteMockServe({
       mockPath: "./src/mock/"
     })],
})
复制代码

1.3 无论哪种方式，都要在main.js引入

import  './mock/index'
复制代码

1.4 在组件中使用

import axios from 'axios'
axios.get('/api/user').then((res)=>{ console.log(res); })
复制代码

2. 生产环境也要用mockjs

2.1 /src/mock/index.js

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
export function setupProdMockServer() {
    createProdMockServer([{
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: { 
                    id:123,
                    username:"123"
                },
            }
        }
    }])
}
复制代码

2.2 main.js

import { createApp } from 'vue'
import App from './App.vue' 
import { setupProdMockServer } from './mock/index';
if (process.env.NODE_ENV === 'production') {
  setupProdMockServer();
}
createApp(App).mount('#app')
复制代码

2.3 vite.config.js

import { defineConfig } from 'vite' 
import { resolve } from 'path'
import { viteMockServe } from 'vite-plugin-mock' 
export default defineConfig({
     plugins: [ viteMockServe({
      // default
      supportTs: true,
      logger: false,
      mockPath: "./src/mock/", 
      localEnabled: false, // 开发环境
      prodEnabled: true, // 生产环境设为true，也可以根据官方文档格式
      injectCode: `import { setupProdMockServer } from './src/mock';setupProdMockServer();`,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.js"), // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误
    } 
})
复制代码

2.4 在组件中使用

import axios from 'axios'
axios.get('/api/user').then((res)=>{ console.log(res); })