uniapp 区分环境运行、打包

这篇具有很好参考价值的文章主要介绍了uniapp 区分环境运行、打包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题

在任何系统中,一般都会有本地开发、体验版、正式版三个环境,三个环境对应的后端服务地址不一样,每次发包前都手动改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中的运行和发行—自定义发行就会有三个菜单。
uniapp 区分环境运行、打包
uniapp 区分环境运行、打包

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 区分环境运行、打包文章来源地址https://www.toymoban.com/news/detail-500096.html

到了这里,关于uniapp 区分环境运行、打包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Linux下打包发布QT程序,并运行在其他没有安装QT环境的linux系统上

    一、Linux下打包发布步骤如下 编译应用程序环境:ubuntu18.04版本 开发环境:Qt5.14.2 编译环境:gcc_64 要移植的电脑:ubuntu18.04版本,没有开发环境 第一步:打包依赖库 1、创建一个打包目录,把生成的可执行文件拷贝放在创建的打包目录下,这里我是创建了一个打包目录名称为

    2024年02月12日
    浏览(37)
  • python pyinstaller打包的exe在win7系统无法运行问题解决方法

    目录 一 .问题起因 二.解决方法 注意: pyinstaller打包之前,请先将bulid文件夹和dist文件夹删除,这两个文件夹是pyinstaller打包后自动生成的,删除重新打包可以避免版本干扰 .         近期做了一个溯源码项目(开发工具使用的是pycharm2023.1.3),由于是在windows环境运行,于是采用了pyin

    2024年02月07日
    浏览(67)
  • 解决vscode更新之后运行jupyter无法选择任何已有内核的问题

    不是连接不到内核是之前所有的环境都找不到了,似乎是版本更新之后jupyter插件的bug 必须要使用老版本jupyter插件。对于我一个生手来说最后通过重装旧版本vscode解决 在控制面板中删除vscode 打开网站Visual Studio Code April 2022 点击蓝字    完成下载安装后记得在安装jupyter插件时

    2024年02月12日
    浏览(58)
  • 使用Uniapp运行、打包、发布微信小程序

    1、HBuilder X 打开项目,运行到微信开发者工具,此时会唤起微信开发者工具 2、打包,运行------小程序-微信, 打包中  打包后的文件 3、打包完成后,在小程序开发工具中点击右上角------点击上传 点击上传   4、到小程序后台就可以看到了。测试需要设为体验版,然后测试后

    2024年02月16日
    浏览(47)
  • uniapp打包白屏问题

    【bug】:浏览器运行正常,模拟器、真机运行只有tab栏显示,或者完全白屏。打包也是白屏。 【控制台报错信息】: 注意:app不支持dom操作 【解决办法】:在main.js里修改 render函数是vue通过js渲染dom结构的函数createElement,app不支持dom操作,所以在这里设置一下就好了。

    2024年02月12日
    浏览(32)
  • 如何创建一个uniapp项目,如何运行手机上,打包等,更换头部,底部图标等。一目了然,

    1.下载一个Hbuilderx https://www.dcloud.io/hbuilderx.html ,根据自己电脑64位 32位安装就好,很简单 2.选择文件→新建→项目  3.选择uniapp的一个快捷带+号的项目。底部导航图标换自己需要的即可 4页面配置的主要四大地方,目前只需了解就行            manifest.json里有些操作需

    2024年02月09日
    浏览(31)
  • UNIAPP离线打包的自定义基座、原生插件加入离线打包、同步资源失败,未得到同步资源的授权,请停止运行后重新运行,并注意手机上的授权提示

    一、UNIAPP离线打包的自定义基座 怎么配置基础打正式包的教程,查看我的另一篇文章,这里就不做过多赘述了! Android端:debug-server-release.aar 在官方离线sdk中的SDK目录下libs目录找到 debug-server-release.aar 文件并复制到项目中的lib文件夹 Android端:打开 dcloud_control.xml,然后添加

    2024年02月15日
    浏览(34)
  • uniapp+vue3打包问题记录

    **背景:**打包app出现问题,只显示底部导航的文字,其他一片空白 1. pages.json文件 :tabBar中的iconPath图标格式不支持svg,只支持:png, jpg, jpeg的格式,当图片改为.png的时候可以正常显示 2. 适配插件的影响 :使用了postcss-pxtorem插件,同时安装了lib-flexible插件,但因为lib-flexib

    2024年01月16日
    浏览(40)
  • uniapp使用cli脚手架创建兼容小程序和h5的项目 自动化命令打包运行

    HbuliderX搭建项目结构: CLI搭建项目结构: CLI方式搭建uniapp项目: 大家可以看下两种方式搭建的项目文件夹目录有什么区别,上面的是HbuilderX模版搭建的小程序项目,下面的是cli搭建的项目,先把my-test项目中src下面的文件全部删除,然后我把小程序代码全部塞进了src文件夹下

    2024年02月16日
    浏览(71)
  • 新环境打包后运行报错java.lang.reflect.InvocationTargetException

    业务场景:MySQL数据库定期从Oracle数据库中同步少量数据,几分钟一次 版本信息:服务器jdk1.8.0_171,开发编译环境jdk1.8.0_181 idea2023.1.2 技术框架:用了maven管理依赖,未发现spring等框架痕迹 将代码少量改动后,本地编译外加依赖打成jar包。 部署到远程服务器时,运行出错,系

    2024年02月04日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包