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

Vue3+TS+vite项目本地测试数据接口搭建

news 2025/5/11 13:21:22

【环境说明】

"vue": "^3.5.13",

"vite": "^6.2.0",

"vite-plugin-mock": "^3.0.2"

【项目结构】

1. 安装依赖

npm install vite-plugin-mock mockjs --save-dev
npm i --save-dev @types/mockjs

2. 配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path'// https://vite.dev/config/
export default defineConfig(({ command }) => ({plugins: [vue(),viteMockServe({mockPath: 'src/mock', // mock文件存放目录enable: command === 'serve', // 只在开发服务器启用logger: true // 是否在控制台显示请求日志})],resolve: {alias: {'@': path.resolve(__dirname, './src')}},base: '/',server: {// 端口号port: 3000,// 监听所有地址host: '0.0.0.0',// 服务启动时是否自动打开浏览器open: true,// 允许跨域cors: true,// 自定义代理规则proxy: {// 完整写法'/api': {target: 'http://xx.xx.xx.xx:8080/api/', // 本地后端接口changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
}))

版本兼容说明

1. v1.x 版本：使用 localEnabled、prodEnabled 区分开发和生产环境

2. v2.x+ 版本：使用 enbale替代，localEnabled、prodEnabled 已弃用

3. v2.x+ 版本：默认支持 TypeScript文件，不再需要显示配置，supportsTs 已移除

3. 创建Mock文件

在项目src目录下创建一个mock文件夹 /src/mock/

/src/mock/user.ts

import { type MockMethod } from 'vite-plugin-mock'
import Mock from 'mockjs'export default [// 用户登录{url: '/login',method: 'post',timeout: 500,response: ({ body }: any) => {console.log('==== Mock Request Body: =======', body) // 自定义日志const { userid, password } = bodyif (userid === '202511' && password === '1234') {return {code: 200,msg: '登录成功',data: {user: {userid: '202511',username: 'TestUser01'},token: Mock.Random.guid()}}} else {return {code: 202,msg: '用户名或密码错误',data: null}}}}
] as MockMethod[]

4. 创建Mock入口文件

/src/mock/index.ts

import type { MockMethod } from 'vite-plugin-mock'
import user from './user'export default [...user] as MockMethod[]

5. 设置开发环境/生产环境

.env.development

VITE_BASE_URL=/

.env.production

VITE_BASE_URL=http://xx.xx.xx.xx:8080/api

6. axios配置

const config = {baseURL: import.meta.env.VITE_BASE_URL || '/', // api地址 - 确保这里是 / 或空timeout: 5000 // request timeout
}

7. 接口调用

/** 用户登录* @param userid* @param password* **/
export const loginCheckApi = (params: LoginRequest): Promise<LoginResponse> => {return http.post('/login', params)
}

正常启动，控制台会输出以下内容