API 调试

API 调试 ​

页面中的请求由 Axios 封装的 src/api/http.ts 统一处理。开发环境默认访问 /api；当设置 API_PROXY_TARGET 时，Vite 会把 /api/* 代理到后端服务，从而避免本地开发时的跨域问题。

在 Vue 组件中调用 ​

ts
import { apiClient } from '../api/http'

interface Article {
  id: string
  title: string
}

const articles = await apiClient.get<Article[]>('/articles', {
  params: { page: 1, pageSize: 10 }
})

环境变量 ​

复制 .env.example 为 .env.local，再填写 API 地址。以 VITE_ 开头的变量会暴露到浏览器，不能存放密钥；API_PROXY_TARGET 仅由 Vite 开发服务器读取。

bash
VITE_API_BASE_URL=/api
API_PROXY_TARGET=https://api.example.com

WARNING

生产环境的跨域、身份认证和权限校验必须由后端或网关正确配置。Vite 开发代理不会在 vitepress build 产生的静态站点中运行。