Vue 教程：使用 Vite 配置开发代理与生产环境 API 地址切换

快速概述

在 Vue 项目开发中，前后端分离架构下，开发者常面临两个痛点：开发环境跨域请求被浏览器拦截，以及项目上线后 API 地址需要从本地开发服务器切换到生产服务器。使用 Vite 作为构建工具，可以通过配置 server.proxy 实现开发代理，并结合环境变量文件实现生产环境 API 地址的自动切换。前置环境要求：已安装 Node.js（建议 18+ 版本）并创建好 Vue 3 + Vite 项目。

核心概念与原理

Vite 开发服务器基于 http-proxy 实现代理转发。当浏览器向开发服务器发起请求时，Vite 会根据 server.proxy 配置，将匹配的请求转发到目标服务器，从而绕过浏览器的同源策略限制。环境变量机制则通过 .env.development 与 .env.production 文件，在不同模式下加载对应的变量，实现 API 地址的动态切换。

实战步骤与代码

步骤一：创建环境变量文件

在项目根目录创建 .env.development 和 .env.production 文件：

# .env.development
VITE_API_BASE_URL=/api
VITE_API_TARGET=http://localhost:8080

# .env.production
VITE_API_BASE_URL=https://api.example.com

步骤二：配置 Vite 开发代理

在 vite.config.js 中配置代理：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ plugins: [vue()], server: { proxy: { '/api': { target: process.env.VITE_API_TARGET, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

步骤三：封装请求模块

// src/utils/request.js
import axios from 'axios'
const request = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 })
export default request

步骤四：启动与构建

• 开发模式：npm run dev，请求 /api 前缀的接口会被代理到 http://localhost:8080。
• 生产构建：npm run build，import.meta.env.VITE_API_BASE_URL 自动替换为 https://api.example.com。

常见坑点与优化

• 代理不生效：检查 vite.config.js 修改后是否重启开发服务器。
• 路径重写错误：若后端接口不含 /api 前缀，需使用 rewrite 去除前缀。
• 环境变量未生效：Vite 仅暴露以 VITE_ 开头的变量，且修改环境变量文件后需重启服务。
• 生产环境跨域：生产环境建议由 Nginx 等反向代理处理跨域，前端仅配置完整 API 地址。

优化建议：将 API 地址统一收敛到环境变量文件，避免在业务代码中硬编码；使用 import.meta.env.MODE 判断当前模式，实现更细粒度的逻辑控制。