当前位置：首页 > news >正文

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

news 来源：原创 2025/5/20 4:38:26

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文件,重点看注释

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_',//注意这里是配置读取.env文件的带_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)
		}
	};
};