vue3 之mock数据的使用

vue3 之mock数据的使用 （js版本）

• 安装：npm i mockjs vite-plugin-mock -D

vite.config.js配置

• viteMockServe的相关配置

import vue from '@vitejs/plugin-vue'
import {
  viteMockServe
} from 'vite-plugin-mock'
import path, {
  resolve
} from 'path'
export default ({
  command,
  mode
}) => {
  return {
    base: "./", // 打包后的跟路径 - ./ 加.是为为了避免打包后 出现白屏的效果 （ 不推荐写法 ）
    // 开发环境的 相关配置
    server: {
      // 服务配置
      host: '0.0.0.0',
      port: 5006, // 类型： number 指定服务器端口;
      open: false, // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      }
    },
    plugins: [
      vue({}),
      // mock 数据的 dev环境
      viteMockServe({
        // supportTs: true, // 是否开启支持ts
        mockPath: 'mock', // 设置mockPath为根目录下的mock目录
        localEnabled: command === 'serve', // 设置是否监视mockPath对应的文件夹内文件中的更改
        //是否在控制台显示请求日志
        logger: true
      }),
    ]
  }
}

根目录下创建 mock / app.js

export default [{
  url: '/mock/api/getAppInfo',
  method: 'get',
  response: () => {
    return {
      code: 0,
      title: 'mock请求测试'
    }
  }
}]

使用 axios 请求mock数据

<template>
  <div />
</template>
<script setup>

import axios from 'axios'
axios.get('/mock/api/getAppInfo').then((res) => {
  console.log(res) // {code: 0, title: 'mock请求测试'}
})
</script>

vue3 之mock数据的使用 （ts版本）

vite.config.ts 配置

import { UserConfigExport, ConfigEnv } from 'vite'

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
    ],
  }
}