vue：vite 代理服务器 server: 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
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 后端服务地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }    
})

在上面的示例中，所有以 /api 开头的请求都会被代理到 http://localhost:8000，并且请求路径中的 /api 前缀会被移除。

重启 Vite‌：npm run dev
- 配置完成后，需要重启 Vite 开发服务器，以便使代理配置生效。
‌使用代理‌：
- 在前端代码中，你可以像访问本地资源一样访问代理的后端服务。例如，如果你配置了代理 /api 到 http://localhost:8000，你可以在前端代码中通过 fetch('/api/data') 来访问 http://localhost:8000/data。
‌注意事项‌：
- 在设置代理后，建议在开发过程中禁用其他不必要的网络请求，以减少潜在的安全风险。
- 在生产环境中，通常不会使用代理，而是直接配置后端服务以允许跨域请求，或使用其他安全措施来保护网络环境。
- 如果以上简单的 proxy 配置不能满足您的需求，还可以安装 http-proxy 中间件
  npm install http-proxy-middleware --save-dev
  npm show http-proxy-middleware
  http-proxy-middleware@3.0.3 | MIT | deps: 6 | versions: 88
  The one-liner node.js proxy middleware for connect, express, next.js and more
  https://github.com/chimurai/http-proxy-middleware#readme
- 使用 http-proxy-middleware 示例：
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createProxyMiddleware } from 'http-proxy-middleware'

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: createProxyMiddleware({
      context: ['/api', '/auth'],
      target: 'http://localhost:8000', // 后端服务地址
      changeOrigin: true // 是否改变源地址
    })
  }    
})
```