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

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

uniapp的多环境配置打包方案，通过读取不同环境的配置文件（如development、test、staging、production）来实现多环境打包。本文将详细介绍具体的配置步骤和代码示例。

前言

由于uniapp的hbuilder开发工具，只提供了development和production的环境编译方式，一般来说，只能做到development和production两个环境的区分。在实际开发中，我们如果有多个环境开发需求和打包需求，尤其是配置多个环境的接口请求地址等配置。

针对这种情况，我在网上找了很多相关的资料，基本都是命令行的方案，使用uniapp的scripts方案也有，但是是把配置信息写到scripts上的，这解决方案也不够优雅，如果有多个配置就显得很拥肿了。

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

配置实现

1. 项目根目录，自行新增对应的配置文件
2. 在package.json文件添加uni-app的scripts，需要配置几个环境就添加几个，关于这个配置的意思，可以去查看其他相关的文档，这里不展开讲述。

配置好后，点击运行和发行就能看到对应的环境选择项了

此时只是有对应的环境选择项，接下来的思路就是，判断对应的script执行环境，来加载不同的.env配置文件，读取到项目中

3. 修改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)  
        }  
    };  
};  

4. 接下来在项目中由一个config.js文件来集中管理env相关的配置，再暴露出来给其他业务模块调用。

至此，uniapp的多环境配置已经完成！！！

如果需要命令行配置打包，可以参考其他的博客，直接配置命令行就可以，命令行写--mode参数即可。