vue3.x 设置代理 作者:马育民 • 2026-04-28 21:50 • 阅读:10002 # 介绍 Vue3 代理主要用于**开发环境解决跨域**,分两种工程: - Vite 版 - Vue CLI ### 一、Vite 版(推荐,Vue3 默认) 文件:`vite.config.js` / `vite.config.ts` ```js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { proxy: { // 代理 /api 开头的请求 '/api': { target: 'http://localhost:8080', // 后端地址 changeOrigin: true, // 必须,修改 Origin rewrite: (path) => path.replace(/^\/api/, '') // 去掉 /api 前缀 }, // 可加多个代理 '/ws': { target: 'ws://localhost:8080', ws: true // 代理 WebSocket } } } }) ``` #### 常用参数说明 - `target`:后端真实地址 - `changeOrigin: true`:解决跨域必需 - `rewrite`:路径重写(去掉前缀) - `ws: true`:支持 WebSocket - `secure: false`:HTTPS 后端不验证证书(开发用) #### 前端请求 ```js axios.get('/api/user') // 实际代理到:http://localhost:8080/user ``` --- ### 二、Vue CLI(Webpack)版 文件:`vue.config.js` ```js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } // Webpack 用 pathRewrite 对象 } } } } ``` --- # 注意事项 1. **仅开发环境有效**:打包后代理失效,生产环境需用 Nginx 反向代理或 CORS。 2. **重启服务**:修改配置后必须重启 `npm run dev`。 3. **不要硬编码后端地址**:统一用 `/api`,开发靠代理、生产靠 Nginx。 --- # 生产环境跨域 使用 Nginx 等专业的 web服务器 原文出处:http://malaoshi.top/show_1GW3DQ539Avz.html