Vue项目跨域问题最稳妥解法是环境变量+vue.config.js动态代理+Axios统一baseURL协同实现多环境隔离：1.通过命名规范的.env文件定义VUE_APP_API_BASE_URL和VUE_APP_API_TARGET；2.vue.config.js中devServer proxy读取环境变量动态配置target与pathRewrite；3.Axios实例使用process.env.VUE_APP_API_BASE_URL作为baseURL，确保请求路径与代理规则一致。
Vue 项目中用 Axios 发起请求时遇到跨域，本质是开发服务器（如 http://localhost:8080）与后端接口地址（如 http://192.168.1.100:3000）协议、域名或端口不一致，触发浏览器同源策略拦截。最稳妥、可维护的解法不是改后端或硬编码，而是通过 环境变量 + vue.config.js 动态代理 + Axios 统一 baseURL 三者协同实现多环境隔离。
1. 创建并规范命名环境变量文件
在项目根目录下新建以下文件，注意命名必须以 .env 开头，且变量名必须带 VUE_APP_ 前缀才能被 Vue CLI 注入到客户端代码中：
-
.env：全局默认，所有环境都读取（慎放敏感值） -
.env.development：仅开发环境生效（npm run serve） -
.env.staging：测试环境（如npm run serve --mode staging） -
.env.production：生产环境（npm run build）
例如，在 .env.development 中写：
VUE_APP_API_BASE_URL = /dev-api<br>VUE_APP_API_TARGET = http://192.168.1.100:3000
在 .env.production 中写：
立即学习“前端免费学习笔记（深入）”；
VUE_APP_API_BASE_URL = /api<br>VUE_APP_API_TARGET = https://api.yourcompany.com
记得把 .env.local 和含敏感信息的文件加入 .gitignore，避免误提交。
2. 在 vue.config.js 中配置动态代理
代理只在开发阶段生效（devServer），不参与构建。利用 process.env 读取当前环境变量，让代理目标随环境自动切换：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
module.exports = {<br> devServer: {<br> proxy: {<br> [process.env.VUE_APP_API_BASE_URL]: {<br> target: process.env.VUE_APP_API_TARGET,<br> changeOrigin: true,<br> pathRewrite: {<br> [`^${process.env.VUE_APP_API_BASE_URL}`]: ''<br> }<br> }<br> }<br> }<br>}
这样，开发时访问 /dev-api/user/list，实际被转发到 http://192.168.1.100:3000/user/list，浏览器看到的仍是本地地址，彻底规避跨域。
3. Axios 实例统一使用环境变量 baseURL
封装 Axios 时，不再写死地址，而是读取同一套环境变量：
import axios from 'axios'<br><br>const request = axios.create({<br> baseURL: process.env.VUE_APP_API_BASE_URL,<br> timeout: 10000,<br> withCredentials: true<br})
这样，开发时请求自动走 /dev-api/xxx，上线后构建时 baseURL 变成 /api/xxx，配合 Nginx 或 CDN 的反向代理规则即可无缝衔接，无需修改业务代码。
4. 启动时指定环境模式
确保命令能正确加载对应环境文件：
-
npm run serve→ 加载.env.development -
npm run serve --mode staging→ 加载.env.staging -
npm run build --mode production→ 加载.env.production
Vue CLI 会自动合并 .env 和对应 .env.xxx 的内容，优先级：环境文件 > 全局 .env。
这套方案把“哪里发请求”“发给谁”“怎么转发”完全解耦，开发、测试、预发、生产各用各的地址，团队成员无需手动改配置，CI/CD 流水线也更稳定。真正做到了一次定义，多处生效。
