当前位置：首页 > news >正文

Vue3 》》vite》》vite-plugin-mock mock 模拟数据，loadEnv

news 2025/9/24 7:36:52

vite-plugin-mock

vite-plugin-mock 的核心功能是：提供本地 Mock 数据服务。它允许你在前端开发阶段，使用模拟的 API 数据来代替真实的后端接口，从而实现前后端并行开发。

mock.js 案例
在这里插入图片描述

安装 vite-plugin-mock
npm i vite-plugin-mock -D

//vite.config.ts
import { defineConfig ,ConfigEnv ,UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { viteMockServe } from 'vite-plugin-mock'
// 路由文件
import Page from 'vite-plugin-pages'export default ({ command }: ConfigEnv): UserConfigExport =>{return {//配置路径别名resolve: {alias: {"@": resolve(__dirname, 'src')}},plugins: [vue(),// mock          viteMockServe({// default// 默认配置mockPath: 'mock', // 设置模拟数据文件所在的文件夹，根目录为项目根目录// localEnabled: true, // 设置是否在开发环境下启用 Mock 服务// prodEnabled: false, // 设置是否在生产环境下启用 Mock 服务（绝对不要设为 true！）          localEnabled: command === 'serve',supportTs: true, // 支持 TS 文件logger: true, // 控制台显示请求日志// 忽略某些路径，不进行 Mock 拦截ignore: /^\/api\/ignore-path/,}),/** 自带 api 的自动化导入 */AutoImport({// 自动导入 vue、vue-router、Pinia 相关函数imports: ['vue', 'pinia', 'vue-router']}),/** 组件及其类型的自动化导入 */Components({resolvers: [ElementPlusResolver()],// 自动导入 src/components 目录下的自定义组件dirs: ['src/components'],}),//文件路由Page({dirs: "src/pages", // 需要生成路由的文件目录，默认就是识别src下面的pages文件exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由})],server: {port: 4000,open: true}}
}

在这里插入图片描述

//mock/index.jsimport { MockMethod } from 'vite-plugin-mock'
//createUserList 此函数执行会返回一个数组，数组里面包含两个用户信息
function createUserList(){return [{userId:1,username:'admin',password:'123',desc:'系统管理员',roles:['系统管理员'],routes:['home'],token:'123;456;789'},{userId:2,username:'x',password:'123',desc:'仓管',roles:['仓库管理员'],routes:['wms'],token:'321;654;987'}]}
export default [{url: '/api/user/get',method: 'get',timeout:3000 ,//超时时间response: (req) => {console.log('/api/user/get=======》',req)//获取请求头携带的tokenconst token = req.headers.token;//判断token是否有效const checkUser = createUserList().find(item=>item.token===token)//如果携带token 在数据库(通过createUserList()模拟的)不存在 find 如果不存在，则返回undefinedif(!checkUser){return {code:201,data:{message:'获取用户信息失败',                    }}}// 如果存在return {code: 200,data: {data: {checkUser},},}},},{url: '/api/user/login',method: 'post',response:  ({body}) => {console.log('/api/user/login=======》',body)// 获取请求体携带的用户名、密码const {username,password} = bodyconst checkUser = createUserList().find(item=>item.username ===username && item.password === password)if(!checkUser){return {code:201,data:{message:'账号、密码不正确'}}}return {code:200,data:{token:checkUser.token}}},}
]

在这里插入图片描述

//以app.vue  为例子
<template><div>这是我的主页内容。 Index</div><el-button @click="getUser">获取数据</el-button><el-input v-model="username"></el-input><el-input v-model="password"></el-input><el-button @click="login">模拟登录</el-button>
</template><script lang="ts" setup>
import axios from 'axios';
const username=ref()
const password=ref()
const getUser=async ()=>{try {const response = await axios.get('/api/user/get');  // 向 mock 接口发送请求console.log("获取数据",response)} catch (error) {console.error('Failed to fetch user data:', error);}
}
const login=async ()=>{console.log("模拟登录开始",username,password)const response = await axios({url:'/api/user/login',method:'post',data:{// 因为用了ref 响应式   username.value      username:username.value,password:password.value}});  console.log("模拟登录结束",response)}
</script>

在这里插入图片描述

如果要结合 mock.js

在这里插入图片描述

//Mock/demo.ts
import { MockMethod } from 'vite-plugin-mock'
import  Mock  from 'mockjs' // 引入 mockjs 的 mock 方法export default [{url: '/api/products',method: 'get',response: () => {// 使用 Mock.js 的语法生成更逼真的数据console.log('@@@@@@')return Mock.mock({code: 200,message: 'success','data|10-20': [ // 生成 10 到 20 条随机的产品数据{'id|+1': 1,'name': '@ctitle(5, 10)', // 随机中文标题'price|100-5000': 1, // 100 到 5000 之间的随机数'status|1': ['onSale', 'soldOut', 'comingSoon'], // 随机取一个状态'image': "@image('200x200', '#4A7BF7', 'Product')", // 随机图片'createdAt': '@datetime', // 随机日期时间},],})},},
] as MockMethod[]

在这里插入图片描述

loadEnv

vue2，vue3 环境变量
在这里插入图片描述

//在 vite.config.js/ts 中使用
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {// 加载环境变量const env = loadEnv(mode, process.cwd(), '')return {plugins: [vue()],// 使用环境变量配置其他选项server: {port: env.VITE_PORT || 3000,proxy: {'/api': {target: env.VITE_API_URL,changeOrigin: true}}},define: {// 将环境变量注入到客户端代码中__APP_ENV__: JSON.stringify(env.VITE_APP_ENV)}}
})