nongxiaoyu/环境配置说明.md

环境配置说明

问题背景

Vite 的 proxy 代理功能只在 H5 开发环境 下生效，对于 App、微信小程序、鸿蒙等平台不支持代理，必须直接使用真实域名。

解决方案

通过环境变量 + 条件编译的方式，实现不同平台使用不同的 API 地址。

配置文件说明

1. 环境变量文件

• .env - 默认配置（所有环境的基础配置）
• .env.development - 开发环境配置
• .env.production - 生产环境配置

2. 各平台 API 地址规则

平台	环境	API 地址	说明
H5	开发	/base	通过 Vite proxy 代理到 http://localhost:8080
H5	生产	https://nxy.gbdfarm.com:9000/pro-uniapp	真实域名
小程序	所有	https://nxy.gbdfarm.com:9000/pro-uniapp	真实域名
App	所有	https://nxy.gbdfarm.com:9000/pro-uniapp	真实域名
鸿蒙	所有	https://nxy.gbdfarm.com:9000/pro-uniapp	真实域名

工作原理

H5 开发环境

// 请求: /base/api/user/info
// ↓ Vite proxy 转发
// 实际请求: http://localhost:8080/api/user/info

其他平台或生产环境

// 请求: https://nxy.gbdfarm.com:9000/pro-uniapp/api/user/info
// ↓ 直接请求
// 实际请求: https://nxy.gbdfarm.com:9000/pro-uniapp/api/user/info

如何使用

开发环境

1. H5 开发

   npm run dev:h5
   

   自动使用 /base 代理路径

2. 小程序/App/鸿蒙开发

   npm run dev:mp-weixin  # 微信小程序
   npm run dev:app        # App
   

   自动使用真实域名

生产环境

npm run build:h5           # H5 生产
npm run build:mp-weixin    # 微信小程序生产
npm run build:app          # App 生产

所有平台都使用真实域名

修改配置

如需修改 API 地址，编辑对应的环境变量文件：

修改开发环境地址

编辑 .env.development：

VITE_BASE_URL=/base
VITE_UPLOAD_URL=http://nxy.gbdfarm.com

修改生产环境地址

编辑 .env.production：

VITE_BASE_URL=https://nxy.gbdfarm.com:9000/pro-uniapp
VITE_UPLOAD_URL=https://nxy.gbdfarm.com

注意事项

1. 环境变量必须以 VITE_ 开头才能在代码中访问
2. 修改环境变量后需要重启开发服务器
3. 小程序/App 不支持 proxy，开发时也会直接请求真实域名
4. 确保后端服务器配置了 CORS，允许跨域请求

技术实现

config/api.js

使用条件编译判断平台：

// #ifdef H5
const isH5 = true;
// #endif
// #ifndef H5
const isH5 = false;
// #endif

const dev = {
  serve: isH5 ? "/base" : "https://nxy.gbdfarm.com:9000/pro-uniapp",
  upload: import.meta.env.VITE_UPLOAD_URL
};

vite.config.js

配置 H5 开发环境代理：

server: {
  proxy: {
    '/base': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/base/, ''),
    },
  },
}

常见问题

Q: 为什么小程序开发时不能用 proxy？

A: 小程序运行在微信客户端，不是浏览器环境，无法使用 Vite 的开发服务器代理功能。

Q: 如何在本地调试小程序？

A: 需要启动本地后端服务，或者使用内网穿透工具（如 ngrok）将本地服务暴露到公网。

Q: 环境变量不生效怎么办？

A:

1. 检查变量名是否以 VITE_ 开头
2. 重启开发服务器
3. 清除缓存后重新构建

相关文件

• vite.config.js - Vite 配置文件（包含 proxy 配置）
• config/api.js - API 地址配置
• utils/request.js - 请求拦截器
• .env - 默认环境变量
• .env.development - 开发环境变量
• .env.production - 生产环境变量