為了區(qū)分各種環(huán)境下的不同變量
開發(fā)環(huán)境/生產(chǎn)環(huán)境/測試環(huán)境 等等
之前都是采用手動注釋的方式,很不方便也容易出錯,稍微研究了下,采用以下方案,在此記錄

1. 添加編譯模式

package.json

"uni-app": {
        "scripts": {
            "mp-weixin-dev": {
                "title": "微信小程序:開發(fā)環(huán)境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "name": "dev",
                }
            },
            "mp-weixin-prod": {
                "title": "微信小程序:生產(chǎn)環(huán)境",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "name": "prod"
                }
            },
            "mp-alipay-dev": {
                "title": "支付寶小程序:開發(fā)環(huán)境",
                "env": {
                    "UNI_PLATFORM": "mp-alipay",
                    "name": "dev"
                }
            },
            "mp-alipay-prod": {
                "title": "支付寶小程序:生產(chǎn)環(huán)境",
                "env": {
                    "UNI_PLATFORM": "mp-alipay",
                    "name": "prod"
                }
            }
        }
    }
}

image.png

2. 創(chuàng)建環(huán)境變量文件

開發(fā)環(huán)境 .env.dev.js

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

生產(chǎn)環(huán)境 .env.prod.js

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

3. 使用方式(2種)

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

環(huán)境變量導(dǎo)出.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 在需要使用的文件中,先引入再使用

環(huán)境變量導(dǎo)出.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屬性中直接聲明環(huán)境變量
不過變量多了就比較雜亂,我還是喜歡抽離成單獨的文件,看個人喜好吧

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

4.2 單獨用vite.config.js

不過這樣就沒有自定義的運行(發(fā)行)菜單了,也不容易區(qū)分"開發(fā)環(huán)境"和"生產(chǎn)環(huán)境"或者其它環(huán)境

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

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