关于mock插件引入

环境版本

"vue": "3.2.26"
"vite": "2.6.14"

1.安装依赖

npm install mockjs -S
npm install vite-plugin-mock -S

2.配置vite.config.js

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import createVitePlugins from './vite/plugins'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  const plugins = createVitePlugins(env, command === 'build');
  plugins.push(viteMockServe({
    mockPath: "mock",// 解析根目录下的mock文件夹
    localEnabled: env.VITE_USE_MOCK_ENV === 'true',  // 开发打包开关
    prodEnabled: env.VITE_USE_MOCK_PRO === 'true', // 生产打包开关
    supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
  }));
  return {
    plugins: plugins,
    resolve: {
      // https://cn.vitejs.dev/config/#resolve-alias
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      // https://cn.vitejs.dev/config/#resolve-extensions
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // vite 相关配置
    server: {
      port: 82,
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/dev-api': {
          target: 'http://localhost:8081',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      },
    },
  }
})

关键代码

import { viteMockServe } from 'vite-plugin-mock'

const env = loadEnv(mode, process.cwd());
const plugins = createVitePlugins(env, command === 'build');
plugins.push(viteMockServe({
  mockPath: "mock",// 解析根目录下的mock文件夹
  localEnabled: env.VITE_USE_MOCK_ENV === 'true',  // 开发打包开关
  prodEnabled: env.VITE_USE_MOCK_PRO === 'true', // 生产打包开关
  supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
}));

3.添加mock文件

　　根目录创建mock文件夹以及index.ts文件

import { MockMethod } from 'vite-plugin-mock'
const Mock = require('mockjs')
export default [
    {
        url: '/dev-api/captchaImage',
        method: 'get',
        response: ({ query }) => {
            return {
                code: 200,
                data: {
                    nickname: '@cname',
                    age: '@integer(10-100)',
                    uid: '@id',
                    url: '@image',
                    city: '@city',
                    country: '@county(true)',
                    province: '@province',
                    mobile_phone: '@phone',
                    email: '@email',
                    region: '@region',
                    menus: [
                        {
                            menu_name: '一级导航',
                            id: '@id',
                            code: 'Nav1',
                            children: [
                                {
                                    code: 'about',
                                    menu_url: 'views/about',
                                    access_permissions: '["about"]',
                                    children: [],
                                    menu_name: '测试1',
                                    id: '@id'
                                },
                                {
                                    code: 'home',
                                    menu_url: 'views/home',
                                    access_permissions: '["home"]',
                                    children: [],
                                    menu_name: '测试2',
                                    id: '@id'
                                }
                            ]
                        },

                    ]
                },
            }
        },
    },
] as MockMethod[]

4.配置.env.development文件

# 开发打包开关
VITE_USE_MOCK_ENV = 'false'

# 生产打包开关
VITE_USE_MOCK_PRO = 'false'

备注：开发环境若是要启用mock数据，请把【VITE_USE_MOCK_ENV】节点的值改为【'true'】