vue：vite 代理服务器 proxy 配置

Vite 代理服务器（Proxy）的配置通常用于开发环境，以解决跨域请求等问题。以下是一个详细的配置步骤：

通过以上步骤，你就可以在 Vite 项目中配置代理服务器，以便在开发过程中方便地访问后端服务。

‌找到 Vite 配置文件‌：
- Vite 的配置文件通常为项目根目录下的 vite.config.js 或 vite.config.ts。如果项目中没有这个文件，可以手动创建一个。
‌配置代理‌：
- 在 vite.config.js 或 vite.config.ts 文件中，通过 export default 导出一个配置对象，并在该对象中添加 proxy 属性。proxy 属性是一个对象，用于配置各个代理规则。
‌定义代理规则‌：
- 每个代理规则都是一个以目标URL为键的对象。该对象可以包含以下属性：
  - target：代理的目标地址，即后端服务的实际地址。
  - changeOrigin：是否改变源地址。通常设置为 true，以便代理服务器能够正确识别请求的来源。
  - rewrite：重写规则，用于修改请求的路径或查询参数等。
  - headers：自定义请求头，用于在代理请求中添加额外的HTTP头。
‌示例配置‌：
以下是一个简单的 Vite 代理配置示例：
```
// vite.config.js
export default {
  proxy: {
    '/api': {
      target: 'http://localhost:8000', // 后端服务地址
      changeOrigin: true,
      rewrite: (path) => path.replace(/\/api/, '')
    }
  }
};
```
在上面的示例中，所有以 /api 开头的请求都会被代理到 http://localhost:8000，并且请求路径中的 /api 前缀会被移除。
重启 Vite‌：
- 配置完成后，需要重启 Vite 开发服务器，以便使代理配置生效。
‌使用代理‌：
- 在前端代码中，你可以像访问本地资源一样访问代理的后端服务。例如，如果你配置了代理 /api 到 http://localhost:8000，你可以在前端代码中通过 fetch('/api/data') 来访问 http://localhost:8000/data。
‌注意事项‌：
- 在设置代理后，建议在开发过程中禁用其他不必要的网络请求，以减少潜在的安全风险。
- 在生产环境中，通常不会使用代理，而是直接配置后端服务以允许跨域请求，或使用其他安全措施来保护网络环境。