为了区分各种环境下的不同变量
开发环境/生产环境/测试环境 等等
之前都是采用手动注释的方式,很不方便也容易出错,稍微研究了下,采用以下方案,在此记录

1. 添加编译模式

package.json

"uni-app": {
        "scripts": {
            "mp-weixin-dev": {
                "title": "微信小程序:开发环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "name": "dev",
                }
            },
            "mp-weixin-prod": {
                "title": "微信小程序:生产环境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "name": "prod"
                }
            },
            "mp-alipay-dev": {
                "title": "支付宝小程序:开发环境",
                "env": {
                    "UNI_PLATFORM": "mp-alipay",
                    "name": "dev"
                }
            },
            "mp-alipay-prod": {
                "title": "支付宝小程序:生产环境",
                "env": {
                    "UNI_PLATFORM": "mp-alipay",
                    "name": "prod"
                }
            }
        }
    }
}

image.png

2. 创建环境变量文件

开发环境 .env.dev.js

export default {
    env: 'development',
    request_baseurl: 'http://development', 
};

生产环境 .env.prod.js

export default {
    env: 'production',
    request_baseurl: 'http://production',
};

3. 使用方式(2种)

3.1 在vite.config.js中注入后再使用 (vue2 用vue.config.js同理)

环境变量导出.env.js

import dev from './.env.dev';
import prod from './.env.prod';

export default {
    dev,
    prod
}

注入vite.config.js

import {
    defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import ENV_CONFIG from './.env';

export default defineConfig({
    plugins: [uni()],
    define: {
        'process.env.config': ENV_CONFIG,
    },
});

使用

const env = process.env.config[process.env.name];
console.log(env.request_baseurl);

3.2 在需要使用的文件中,先引入再使用

环境变量导出.env.js

import dev from './.env.dev';
import prod from './.env.prod';

const config = {
    dev,
    prod
}

export default config[process.env.name];

使用

import env from '@/.env';
console.log(env.request_baseurl);

4. 其它

4.1 单独用package.json

在env属性中直接声明环境变量
不过变量多了就比较杂乱,我还是喜欢抽离成单独的文件,看个人喜好吧

"env": {
    "UNI_PLATFORM": "mp-weixin",
    "request_baseurl": "***",
    ...
}

4.2 单独用vite.config.js

不过这样就没有自定义的运行(发行)菜单了,也不容易区分"开发环境"和"生产环境"或者其它环境

import {
    defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
    plugins: [uni()],
    define: {
        'process.env.request_baseurl': "***",
    },
});