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_',
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参数即可。
