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
				}
			}
  		}
  	}
}