uniapp 微信小程序多环境配置及使用
前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,开发环境(dev)、测试环境(test)、线上生产环境(prod)等,不同环境的设置,后端请求api地址等不同,那么在小程序如何设置多环境配置呢?
定义其他的环境变量
之前搞vue的时候 可以通过 .env的方式配置开发测试和线上需要的环境变量
uniapp中只有 development 和 production 这两个条件
vu2版本通过process.env.NODE_ENV可以获取到
我如果需要其他的变量怎么办呢: 如 测试 test等
补充
基于评论里的小伙伴提出在微信开发者工具中点击上传后域名问题:
如果你运行的是开发版或者是测试版,而你线上也就是你在微信公众平台配置域名是正式的,这时候你想上传正式的包,你应该切换成微信小程序——正式版运行到微信开发者工具在点击上传按钮进行打包上传
通过官网我们可以看到示例
在根目录下的 package.json文件中 (没有的话通过 npm init -y初始化创建一个)
{"uni-app": {"scripts": {"dev": {"title": "微信小程序——开发版","env": {"ENV_TYPE": "dev","UNI_PLATFORM": "mp-weixin","VUE_APP_BASE_URL": "http://127.0.0.1:8080/"}},"test": {"title": "微信小程序——测试版","env": {"ENV_TYPE": "test","UNI_PLATFORM": "mp-weixin","VUE_APP_BASE_URL": "http://test.domain/"}},"pro": {"title": "微信小程序——正式版","env": {"ENV_TYPE": "pro","UNI_PLATFORM": "mp-weixin","VUE_APP_BASE_URL": "http://pro.domain/"}}}},"name": "xm-uni-app","version": "1.0.0","description": "{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": ""},"keywords": [],"author": "","license": "ISC"
}
保存之后,在HBuilderX中会显示在 运行/发行 菜单中
vue2版本中使用
直接通过process.env打印的时候会看不到
直接通过process.env.变量名使用就行
console.log(process.env.VUE_APP_BASE_URL,'获取处于当前开发环境的url');
console.log(process.env.ENV_TYPE,'获取当前处于哪个开发环境');
console.log(process.env,'process.env++++++++++++');
vue3 vite版中使用
在vue3中获取不到process,所以需要一些改造
{"uni-app": {"scripts": {"dev": {"title": "微信小程序——开发版","env": {"ENV_TYPE": "dev","UNI_PLATFORM": "mp-weixin","VITE_BASE_API": "http://127.0.0.1:8080/"}},"test": {"title": "微信小程序——测试版","env": {"ENV_TYPE": "test","UNI_PLATFORM": "mp-weixin","VITE_BASE_API": "http://test.domain/"}},"pro": {"title": "微信小程序——正式版","env": {"ENV_TYPE": "pro","UNI_PLATFORM": "mp-weixin","VITE_BASE_API": "http://pro.domain/"}}}}
}
在src/utils文件夹下创建envConfig.js
// 导出的环境请求地址
//本地环境
const dev = {ENV: "dev",VITE_BASE_API: "http://127.0.0.1:8080/dev-api",
};//正式环境
const pro = {ENV: "pro",VITE_BASE_API: "https://xxx/prod-api",
};//测试环境
const test = {ENV: "test",VITE_BASE_API: "https://xxx/test-api",
};export default {dev,test,pro,
};
在vite.config.js添加配置
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import ENV_CONFIG from "./utils/envConfig.js";
import { resolve } from "path"; // 导入 path 模块,帮助我们解析路径export default defineConfig(() => {return {server: {port: "3002",},resolve: {alias: {"@": resolve(__dirname, "/src"),},},plugins: [uni()],define: {"process.env.config": ENV_CONFIG, //配置一'process.env': process.env, //配置二},};
});
使用方式
let baseURL = process.env.config[process.env.UNI_SCRIPT].VITE_BASE_API; //获取处于当前开发环境的url
let evnName = process.env.config[process.env.UNI_SCRIPT].ENV; //获取当前处于哪个开发环境
console.log("baseURL:", baseURL, "++++++++++++++++++++++++");
console.log("envName:", evnName, "++++++++++++++++++++++++");
console.log("evn:", process.env, "++++++++++++++++++++++++");
uniapp 微信小程序多环境配置及使用相关推荐
- 微信小程序Nginx环境配置
环境配置概述 主要内容: SSL免费证书申请步骤 Nginx HTTPS 配置 TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申 ...
- 微信小程序不同环境配置不同接口地址
uniapp: uni.getAccountInfoSync() 可以获取到当前在哪个环境,下面是文档地址 https://uniapp.dcloud.net.cn/api/other/getAcco ...
- Uni-app微信小程序开发
Uni-app微信小程序开发 环境配置 下载好h5和微信小程序,在h5中创建一个uni-app空项目 第一次运行到微信小程序的时候,需要将小程序的安装路径放到运行下面 文件含义 Pages:存放页面文 ...
- 【大白话学习】UniApp 微信小程序与APP应用 开发零基础入门教程(一)---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
- vue uniapp 微信小程序 搜索下拉框 模糊搜索
vue uniapp 微信小程序 搜索下拉框 模糊搜索 话不多说 直接贴代码 template <template><view class="index"> ...
- 1个月uni-app微信小程序开发上线实战专栏介绍
一.专栏介绍: <uni-app开发微信小程序1个月上线实战>,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔--资深前端开发工程师,具有六年以上的前端 ...
- 基于安卓/android/微信小程序的组装机配置商城APP-#计算机毕业设计
项目描述 从上世纪末到目前,计算机科学技术已经被尝试应用在各个职业各个领域,在商业贸易上,使用比重较高.计算机科学技术包括软件技术.网络技术.硬件技术等,越来越多的商家使用计算机来进行营业,出售.收购 ...
- 阿里云服务搭建微信小程序开发环境
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...
- uni-app 微信小程序分享按钮
uni-app 微信小程序分享按钮 官方文档说明 在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写相关 appkey,微信 appkey 在需要分享的页面填写: ...
最新文章
- vs2015添加管理员权限
- java把字符串变代码,Java/javaScript将字符串转变成可执行的语句
- BERT入门讲解(内附源码)【自然语言处理NLP-100例】
- android 使用Photoshop获取图片某一点的颜色
- C++存储区域基础概念详解
- 关于Python的一切:2018年,你读这8本书就够了
- 浮点数表示(记录学习过程中遇到的问题)
- poj 2389 Bull Math java解决!!
- hasp运行不成功_HASP加密狗驱动程序没有安装成功如何解决
- 面试字节跳动计算机视觉算法实习岗位
- 20201022-成信大-C语言程序设计-20201学期《C语言程序设计B》C-trainingExercises19
- p6spy mysql8_P6Spy配置使用
- 人类自然语音频率范围
- 「课程」行为经济学-北京大学光华管理学院
- linux的tar命令的exclude,mac 的tar命令--exclude和linux的tar命令--exclude的区别
- Mac 查看本地端口
- 【DL】为什么需要深度学习:模组化、端到端学习(语音识别、图像处理情景)、类比逻辑电路
- 802.11ax分析1---IEEE 802.11ax和IEEE 802.11ac性能对比
- P4294 [WC2008]游览计划
- python图片raw转换成jpg