vue3+vite 配置反向代理和跨域 设置端口号

Vue3 和 Vite 结合配置反向代理和跨域主要是为了在本地开发环境下访问非本机服务。以下是基本的设置步骤：

1. **Vite** 中设置：Vite 默认支持 `vite.config.js` 文件来进行配置。你需要添加一个 `server` 对象，其中包含 `proxy` 属性。例如：

export default defineConfig({
  server: {
    port: 3000, // 可选，设置服务器监听端口，默认为 3000
    proxy: {
      '/api': { // 目标 URL 前缀
        target: 'https://api.example.com', // 跨域目标地址
        changeOrigin: true, // 允许跨域请求
        secure: false, // 如果目标是 HTTPS，则这里设为 false
        rewrite: (url) => url.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

2. **Vue3** 部分：这主要是处理浏览器的同源策略，对于 Vue 的路由配置，你可以使用动态路由元信息来实现跨域，但这不是必需的。

3. **启用跨域**：如果你的API需要跨域，后端服务器可能需要允许来自特定域名或端口的请求。具体取决于你的服务器环境，如 Node.js 的 Express 或 Nginx，通常需要在服务器上做相应的 CORS（Cross-Origin Resource Sharing）配置。