如果前端应用和后端接口服务器没有运行在同一个主机上，你需要在开发环境下将接口请求代理到接口服务器。
如果是同一个主机，可以直接请求具体的接口地址。
在 vite.config.ts 配置文件中，提供了 server 的 proxy 功能，用于代理 API 请求。
server: {\n proxy: {\n "/api":{\n target: 'http://localhost:3000',\n changeOrigin: true,\n ws: true,\n rewrite: (path) => path.replace(new RegExp(`^/api`), ''),\n }\n },\n},\n配置接口前缀，可以在对应的 env 文件中，修改 VITE_API_BASE_PATH 的值
注意
该配置只能作用于 本地开发环境。
从浏览器控制台的 Network 看，请求是 http://localhost:3000/api/xxx，这是因为 proxy 配置不会改变本地请求的 url。
在本项目中，所有的接口数据都是使用 Mock 模拟
接口统一存放于 src/api/ 下面管理
以获取列表接口为例:
在 src/api/ 内新建模块文件，其中参数与返回值最好定义一下类型，方便校验。虽然麻烦，但是后续维护字段很方便。
提示
类型定义文件可以抽取出去统一管理，具体参考项目
import request from '@/axios'\nimport type { TableData } from './types'\n\nexport const getTableListApi = (params: any) => {\n return request.get({ url: '/example/list', params })\n}\n\nexport const getTreeTableListApi = (params: any) => {\n return request.get({ url: '/example/treeList', params })\n}\n\nexport const saveTableApi = (data: Partial<TableData>): Promise<IResponse> => {\n return request.post({ url: '/example/save', data })\n}\n\nexport const getTableDetApi = (id: string): Promise<IResponse<TableData>> => {\n return request.get({ url: '/example/detail', params: { id } })\n}\n\nexport const delTableListApi = (ids: string[] | number[]): Promise<IResponse> => {\n return request.post({ url: '/example/delete', data: { ids } })\n}\n\naxios 请求封装存放于 src/axios 中。
axios 全局配置放在 src/constants 中。
注意
更改之后，将影响所有的请求。
/**\n * 请求成功状态码\n */\nexport const SUCCESS_CODE = 0\n\n/**\n * 请求contentType\n */\nexport const CONTENT_TYPE = 'application/json'\n\n/**\n * 请求超时时间\n */\nexport const REQUEST_TIMEOUT = 60000\nMock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发进程所阻塞。
本项目使用 vite-mock-plugin 来进行 mock 数据处理。项目内 mock 服务分本地和线上。
本地 mock 采用 Node.js 中间件进行参数拦截（不采用 mock.js 的原因是本地开发看不到请求参数和响应结果）。
如果你想添加 mock 数据，只要在根目录下找到 mock 文件，添加对应的接口，对其进行拦截和模拟数据。
在 mock 文件夹内新建文件
TIP
文件新增后会自动更新，不需要手动重启，可以在代码控制台查看日志信息 mock 文件夹内会自动注册
TIP
mock 的值可以直接使用 mock.js 的语法。
可以在对应的 env 文件中设置 VITE_USE_MOCK 为 false ，如果想要更彻底一点，可以在vite.config.ts中删除 viteMockServe 对应的代码。
由于该项目是一个展示类项目，线上也是用 mock 数据，所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。
项目线上 mock 采用的是 mock.js 进行 mock 数据模拟。
',37);p.render=function(a,t,p,e,c,l){return s(),n("div",null,[o])};export default p;export{t as __pageData};