问题

在任何系统中，一般都会有本地开发、体验版、正式版三个环境，三个环境对应的后端服务地址不一样，每次发包前都手动改base_url，不仅浪费时间还容易出错，uniapp也不例外；

环境	base_url
本地开发	http://dev.domain
体验版	http://test.domain
正式版	http://prod.domain

我们就想，如果三个环境对应的有三个配置文件，uniapp根据环境自动加载对应配置文件就好了。在官方文档package.json中已经提到了解决办法，那就是在package.json中在uni-app扩展节点配置。
Tip：如果没有package.json，通过命令npm init -y创建。

解决

配置uni-app扩展点

"uni-app": {"scripts": {"dev": {"title": "开发版","env": { //env节点中定义环境变量,相当于vuejs中的.env.[mode]文件"UNI_PLATFORM": "mp-weixin", //特定变量，只能是指定枚举值"VUE_APP_BASE_URL":"http://127.0.0.1:8080/" //自定义环境变量}},"pre": {"title": "测试版","env": {"UNI_PLATFORM": "mp-weixin","VUE_APP_BASE_URL":"http://test.domain/"}},"prod": {"title": "正式版","env": {"UNI_PLATFORM": "mp-weixin","VUE_APP_BASE_URL":"http://prod.domain"}}}}

注意package.json中不能有注释也就是不能有双斜杠(//)，所以复制上述代码后，将注释删除，否则会编译错误。

\package.json: Unexpected token / in JSON at position 326
21:45:31.591     at parse (<anonymous>)
21:45:31.591     at Object.Module._extensions..json (internal/modules/cjs/loader.js:1041:22)
21:45:31.595     at Module.load (internal/modules/cjs/loader.js:863:32)
21:45:31.595     at Function.Module._load (internal/modules/cjs/loader.js:708:14)

加了上述配置后，hbuilderx中的运行和发行—自定义发行就会有三个菜单。

js文件中引用环境变量

不需要再判断NODE_ENV，直接引用即可。

let baseURL = process.env.VUE_APP_BASE_URL
console.log("baseURL:",baseURL )

验证

然后点击运行–选中一个环境，控制台可以打印一下base_url。

后续思考

我们都知道在vue中，有模式和环境变量的概念，它也是用来解决，区分环境的问题，vue中的模式会影响NODE_ENV，如果没有指定NODE_ENV，那么默认NODE_ENV与模式相同；而在uniapp中，我们并没有指定模式，只要是运行菜单，那么NODE_ENV总是development，只要是发行菜单，NODE_ENV总是production，即使在package.json中配了NODE_ENV也是如此，其实这是合理的，因为运行，肯定是开发状态，所以NODE_ENV=development是合理的，而发行是build是上线状态，所以NODE_ENV=production是合理的。
可以在js中输出NODE_ENV进行验证

console.log(process.env.NODE_ENV)

总结

在运行、打包时，都要区分环境，以上通过package.json配置环境变量，实现了需求。

参考

2021-12-07 uniapp区分打包环境
uniapp 环境变量
vue 模式和环境变量
uniapp package.json

个人公众号

uniapp 区分环境运行、打包相关推荐

uni-app cli创建项目打包并配置多环境读取配置文件信息
uni-app cli创建配置多环境读取配置文件信息在项目src下创建以下配置文件在package.json中添加以下代码 VUE_APP_ENV:用来区分环境 NODE_ENV:用来定死打包目录 ...
anaconda3环境整体打包放在Spark集群上运行
一.将虚拟Python环境打包创建好环境后,进入到环境所在的文件夹,例如环境是/home/hadoop/anaconda3/envs, cd到envs下,使用打包命令将当前目录下的文件打成zip包: ...
Mac笔记本idea打包maven工程，本地环境运行正常，打包成功，却启动不成功
记录一下: Mac笔记本使用idea打包maven工程, 本地环境运行正常,打包成功,却启动不成功: window打包成功且启动正常: 查询启动错误日志是由于zookeeper null指针的问题,但 ...
Windows Java JavaFX IntelliJ IDEA 开发环境搭建创建工程编译运行打包分发自定义运行时
博文目录文章目录本文说明 JavaFX 简单说明 JavaFX 版本说明 JavaFX 与 JDK 的关系 JavaFX 与 JDK Modular (JDK 9 模块化系统) JavaFX 模块 ...
python环境的打包与加载
目录 1 pip方式 1.1 requirements.txt文件的生成 1.2 requirements.txt环境的加载: 2 conda方式 2.1 env.yml文件的生成 2.2 env.y ...
Tomcat Maven插件分环境运行配置
为什么80%的码农都做不了架构师?>>> 本文主要针对分环境运行.打包配置的Maven Java Web项目进行介绍与描述. maven tomcat分环境运行分环境打包在 ...
【uni-app】总结uni-app订单支付和打包发布
前言总结uni-app订单支付和打包发布 1- 支付 1.1 app的支付 1.1.1 准备工作支付厂商获取id 去微信支付平台接入微信支付支付宝打包时候去mainifest.json文件 ...
python脱离环境运行_python 生成exe脱离python环境运行
1. 简介 python 程序编写完之后需要进行打包成exe发布,不暴露源码,目前主要打包的工具有三种: 1) PyInstaller(推荐) 2) cx_Freeze 3) py2exe PyIns ...
Uniapp 原生插件云打包
Uniapp 原生插件云打包走了一些路,填了一些坑和大家分享下 : 第一步原生插件的编写: 网上有很多资料官方的文档:https://ask.dcloud.net.cn/article/35 ...

uniapp 区分环境运行、打包

问题

解决

配置uni-app扩展点

js文件中引用环境变量

验证

后续思考

总结

参考

个人公众号

uniapp 区分环境运行、打包相关推荐

最新文章

热门文章