vue 初始化时通过构建阶段注入的process.env变量确定api地址,优先使用vue_app_api_base等自定义环境变量,在main.js或request封装层统一配置axios baseurl,避免运行时依赖window.location判断。

Vue 初始化时做环境判断,核心是利用构建阶段注入的 process.env 变量,而不是在运行时靠 URL 或手动写死。它必须在应用启动前就确定好 API 地址,否则组件或请求模块初始化会出错。
用 process.env.NODE_ENV 做基础区分
这是 Vue CLI 默认提供的标准方式,值为 'development'、'production' 或 'test'。它在打包时就被固化进代码,不可运行时修改。
- 开发环境走本地 mock 或联调地址:
http://localhost:3000/api - 生产环境走正式域名:
https://api.example.com/api - 测试环境可单独配一个预发地址:
https://test-api.example.com/api
配合 .env 文件定义更明确的环境标识
仅靠 NODE_ENV 不够灵活(比如 test 和 production 都是 'production'),推荐加自定义变量,例如:
递归分析 Vue 项目组件依赖,从入口文件生成组件层级图,支持 Vue 2/3,输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- .env.development:VUE_APP_ENV=dev
- .env.test:VUE_APP_ENV=test & VUE_APP_API_BASE=/api
- .env.production:VUE_APP_ENV=prod & VUE_APP_API_BASE=https://api.example.com/api
这样在代码里就能清晰判断:process.env.VUE_APP_ENV === 'test',且 API 地址直接取 process.env.VUE_APP_API_BASE,无需 if-else 拼接。
在入口文件(main.js)或请求封装层统一配置
不要等组件 created 或 mounted 再判断——那时 axios 实例可能已创建完毕。应在最顶层完成初始化:
- 在 main.js 中提前设置全局 config 或挂载到 Vue.prototype
- 更推荐在 utils/request.js 中创建 axios 实例时读取环境变量
- 示例:
const service = axios.create({ baseURL: apiBase });
避免用 window.location 判断环境
虽然 window.location.hostname 看似直观,但它属于运行时行为,有明显缺陷:
- 本地开发用
npm run serve时 hostname 是 localhost,但 build 后部署到 Nginx 的测试目录(如 /test/)仍显示 prod 域名 - 无法支持同一域名下多环境共存(比如 test.example.com 和 prod.example.com 都是 production 模式)
- 构建产物无法复用,每次都要重新 build,违背 CI/CD 原则
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!









