uniapp,小程序环境配置(生产,开发)

本文介绍了在utils目录下的config.js文件中,如何根据开发环境(如MP、H5、APP-PLUS)动态设置base_url和baseUrl。通过判断环境变量,实现了在不同环境下对API地址的灵活切换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

utils文件里面新建一个config.js文件

const ENV_ARR = {
	// 开发环境
	DEV: {
		base_url: 'https://**********/api',  // 请求基地址
		baseUrl: 'https://**********'  // 基地址
	},
	// 正式环境
	PROD: {
		base_url: 'https://**********/api',
		baseUrl: 'https://**********'
	}
    // 其他环境
}

// #ifdef MP
const { envVersion } = wx.getAccountInfoSync().miniProgram;
let ENV = ''
switch (envVersion) {
	case 'develop':
		ENV = 'DEV'  // 开发版,此处修改开发环境
		break;
	case 'trial':
		ENV = 'PROD'  // 体验版
		break
	case 'release':
		ENV = 'PROD'  // 正式版
		break
	default:
		ENV = 'PROD'
		break
}
// #endif

// #ifdef H5
let ENV = 'PROD'
// #endif
// #ifdef APP-PLUS
let ENV = 'PROD'
// #endif

export default {
	// #ifdef H5
	base_url: ENV_ARR[ENV].base_url,
	baseUrl: ENV_ARR[ENV].baseUrl
	// #endif
	// #ifdef MP-WEIXIN
	base_url: ENV_ARR[ENV].base_url,
	baseUrl: ENV_ARR[ENV].baseUrl
	// #endif
	// base_imgUrl: ENV_ARR[ENV].base_imgUrl
}

外面使用

import config from '@/utils/config.js'
const base_url = config.base_url

### 如何在 UniApp 中进行小程序环境配置 #### 配置开发环境 为了成功使用 UniApp 进行多端小程序开发,首先需要确保开发环境已经正确安装并配置好。HBuilderX 是官方推荐的集成开发工具 (IDE),它提供了完整的支持用于创建、调试发布基于 UniApp 的应用。 通过 HBuilderX 创建新项目后,在项目的根目录下会自动生成 `manifest.json` 文件以及其它必要的文件夹结构[^2]。此文件包含了关于应用程序的基础信息及其运行时设置等内容。 #### 设置微信开发者工具路径 进入 HBuilderX 后打开菜单栏中的 **“视图(View)-> “Setting(快捷键 Ctrl+,)”**, 找到左侧列表里的 `"通用"` 节点下的子项 `"小程序运行配置"`, 此处需指定本地已安装好的微信 WebStorm 插件或者独立版 WeChatDevTools 可执行程序的具体位置[^3] 。只有当该字段被正确定位至实际存在的软件实例上之后, 用户才能利用内置模拟器预览效果或是上传代码包给平台审核等功能. #### 使用外部配置管理不同环境变量 对于区分线上正式版本与线下测试阶段而言非常重要的一环就是合理安排各自的 API 地址或其他动态参数值的变化需求。可以通过引入单独定义全局常量的方式实现灵活切换: ```javascript // utils/config.js if(process.env.NODE_ENV === 'production'){ module.exports = { base_url:"https://prod.example.com/api" } }else{ module.exports ={ base_url:"http://localhost:8080/api" } } ``` 接着可以在任何地方这样调用这些预先设定好了的数据源链接地址: ```javascript import config from '@/utils/config.js' const baseUrl = config.base_url; console.log(baseUrl); // 输出当前环境下对应的接口基础URL ``` 上述方法允许开发者轻松维护多个不同的部署目标而无需频繁修改核心逻辑部分[^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

 冰紫露恋蝶玛丽红红秃头宝贝

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值