Uniapp多端项目开发：环境变量配置与环境区分打包指南-七爪网

在项目开发过程中，我们难免会遇到一些难题，比如这位朋友提出的关于获取地址变量的疑问。在vue3.0、vite和3.4.15版本的环境下，有特定的解决方案，但这种方法存在限制，目前仅适用于小程序和网页，这让人既期待又感到无奈。

获取地址变量的意义

在开发阶段，获取地址信息是至关重要的步骤。举例来说，在制作电商网站时，商品展示会依据地址信息而变化，比如不同地区的商品种类和配送情况。正确的地址信息能够让用户浏览到更贴近他们需求的商品。此外，对于新闻类的小程序，依据地址信息推送当地新闻，有助于提升用户的关注度。

在实际操作中，如何使用地址变量？这个变量能帮助页面精确定位内容。比如，在旅游类页面上，通过地址变量可以推荐附近的旅游景点，从而提高用户的使用感受。

缺陷的影响

<script setup>
	import {
		ref,
		toRefs,
		reactive,
		defineComponent,
		onMounted,
		watch,
		computed,
	} from 'vue';
	const baseURL = ref(process.env.VUE_APP_BASE_URL);
	这个baseURL就是获取到的地址变量。
</script>

小程序和网页的使用限制确实带来了一些不便。若要打造一个功能完备的app，势必要深入探究解决方案。有些情况下，app上无法采用这种方法，这会拖慢开发进程。比如，一个预定类的应用本计划在网页、小程序和app上同步上线，但由于这一限制，app的部分功能只能暂时搁置。

从用户的角度来看，若一款应用无法迅速实现该功能，可能会降低用户对其的期待，从而导致用户流失。

第一步安装.json文件

若项目缺少.json文件，遵循步骤进行创建至关重要。拿我过往的项目来说，那时也是缺少该文件。利用npminit-y命令轻松生成.json文件。文件一旦创建，便会出现在项目根目录。若项目原本已有此文件，自然方便许多；若没有，则必须仔细完成这一步骤。

尽管创建这个文件的过程并不繁琐，然而它却是整个配置的根基所在。若这一环节处理不当，后续的配置工作将难以顺畅进行。这就像建造房屋，若地基不稳，那么整个建筑结构自然无法牢固。

第二步配置.json文件

配置文件中的.json部分必须严格遵守官方指南，注释内容必须去除。以前就出现过类似问题，有人照搬代码时连同注释一并复制，结果整个配置都出现了错误，不得不多次重新设置。因此，严格按照文档指导进行操作是极为必要的。

{
  "name": "uniuiTemplate",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  // 下边就是所有的你可以配置的不同平台的各个环境变量的配置
  "uni-app": {
  		"scripts": {
			"h5dev":{
				"title":"h5开发版",
				"browser":"chrome",  
				"env": {
				    "UNI_PLATFORM": "h5", //基准平台，必须写平台准许的值
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5dev/"  //自定义环境变量
				},
				"define":{
					"H5-DEV":true
				}
			},
			"h5test":{
				"title":"h5测试版",
				"browser":"chrome",  
				"env": {
				    "UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5test/",
					"MY_TEST":"test-variable"
				},
				"define":{
					"H5-TEST":true
				}
			},
			"h5prod":{
				"title":"h5生产版",
				"browser":"chrome",  
				"env": {
				    "UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5prod/"
				},
				"define":{
					"H5-PROD":true
				}
			},
			"mp-weixin-dev":{
				"title":"微信开发版",
				"env": {
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-dev/"
				},
				"define":{
					"MP-WEIXIN-DEV":true
				}
			},
			"mp-weixin-test":{
				"title":"微信测试版",
				"env": {
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-test/"
				},
				"define":{
					"MP-WEIXIN-TEST":true
				}
			},
			"mp-weixin-prod":{
				"title":"微信生产版",
				"env": {
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-prod/"
				},
				"define":{
					"MP-WEIXIN-PROD":true
				}
			}
  		}
  	}
}