uni-app 多环境配置

前后端分离模式下,不同的环境如开发环境(dev)、测试环境(test)、生产环境(prod)等,不同环境后端数据库、api地址等可能都不同 。
uni-app中只有development和production两个环境
以配置api地址为例

方案1

javascript 复制代码
const developmentUrl = 'http://102.168.101.222:10086/';
const productionUrl = 'http://xxx.xxx.xxx.xxx:xxxxx/';

const baseUrl = process.env.NODE_ENV === 'development' ? developmentUrl : productionUrl;
//uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换
// 假设只需要对单一平台配置,可以 package.json 中配置,在 HBuilderX 的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package

fetchApi:async function(url,requestType,data,asyncFlag=true,header){
        var fetchUrl=baseUrl + url;
         ....
}

方案2

javascript 复制代码
//.env.development文件
VITE_API_URL=http://http://102.168.101.222:10086/
javascript 复制代码
//.env.production文件
VITE_API_URL=http://xxx.xxx.xxx.xxx:xxxxx/

需要使用的到时,如

javascript 复制代码
config: {
         baseURL: import.meta.env.VITE_API_URL,
             ...
}

建议使用方案2,将生产环境配置与开发环境配置区分在不同文件,更加清晰。

相关推荐
fionlsq7 小时前
uniapp集成原生安卓开发的插件
android·uni-app·小组件
奶糖 肥晨9 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
2501_9160074712 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_0713 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
iOS阿玮13 小时前
AppStore提审混合开发技术选型,独立开发者和公司都适用。
uni-app·app·apple
2501_9159214318 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
2501_9160137418 小时前
App 上架服务全流程解析,iOS 应用代上架、ipa 文件上传工具、TestFlight 测试与苹果审核实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑18 小时前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设
2501_9159090620 小时前
App Store 上架完整流程解析,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与苹果审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone