uniapp 多环境配置打包，比较优雅的解决方案，全网相对优解

读取.env.[development|test|staging|production]配置文件进行打包，最终效果如下图可以看到多个环境，并且我们可以自定义更多的环境配置

前言

由于uniapp的hbuilder开发工具，只提供了development和production的环境编译方式，一般来说，只能做到development和production两个环境的区分。在实际开发中，我们如果有多个环境开发需求和打包需求，尤其是配置多个环境的接口请求地址等配置。针对这种情况，我在网上找了很多相关的资料，基本都是命令行的方案，使用uniapp的scripts方案也有，但是是把配置信息写到scripts上的，这解决方案也不够优雅，如果有多个配置就显得很拥肿了。

下面，我们一步一步来配置实现如何根据编译环境读取对应的.env文件加载到项目中。（下面只讲vite配置的方式，webpack的配置方式有空再补充）

配置实现

项目根目录，自行新增对应的配置文件
在package.json文件添加uni-app的scripts，需要配置几个环境就添加几个，关于这个配置的意思，可以去查看其他相关的文档，这里不展开讲述。配置好后，点击运行和发行就能看到对应的环境选择项了此时只是有对应的环境选择项，接下来的思路就是，判断对应的script执行环境，来加载不同的.env配置文件，读取到项目中
修改vite.config.js文件,重点看注释

javascript 复制代码

import { loadEnv } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
// import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default (command, mode) => {//uniapp中，这个mode,不用命令行的添加--mode编译的话，是undefined的
	let env = undefined;
	if(!mode){//这里是为了确保mode有值，假如开发人员直接在开发工具选择编译到浏览器，也能兼容到
		if(process.env.NODE_ENV=='production'){
			mode = 'production'
		}else{
			mode = 'development'
		}
	}
	switch (process.env.UNI_SCRIPT){//这个就是第三步配置的uni-app的script,一一对应判断
		case 'dev-h5':
			mode = 'development';
			break;
		case 'test-h5':	
			mode = 'test'
			break;
		case 'stage-h5':
			mode = 'staging'
			break;
		case 'prod-h5':
			mode = 'production'
			break;
	}
	env = loadEnv(mode, __dirname,"APP")
	console.log(`编译${mode}环境`)
	console.log(env);//此时已经把env配置读取到了，并且这是个json格式，
	return {//别试图在这里定义mode,试过了，在uniapp中不起作用，目前方案只想到了用define来做
		envPrefix:'APP_',
		plugins: [
			uni()
		],
		server: {
			host: true,
			// open: true,
			port: env.APP_PORT,
			hmr: {
				overlay: true,
			},
		},
		define:{//根据vite的官方文档，可以把define定义的变量名，在项目编译时，识别项目文件中的这个变量名直接替换成env配置，我们把这个变量放到config.js文件中，对env配置进行集中管理
			__VITE_ENV__:JSON.stringify(env)
		}
	};
};

接下来在项目中由一个config.js文件来集中管理env相关的配置，再暴露出来给其他业务模块调用。至此，uniapp的多环境配置已经完成！！！如果需要命令行配置打包，可以参考其他的博客，直接配置命令行就可以，命令行写--mode参数即可。