uniapp は複数の環境を構成します

導入

プロジェクト開発では、現在の環境に応じて異なるパラメータを設定する必要があることがよくあります。ファイル内で直接変更するのは効率的ではないため、異なる環境の変数を一元管理する必要があります。この記事は、HBuilderX で生成された uniapp プロジェクトを対象としています。

HBuilderX に基づいて現在の環境を決定する

「HBuilderX で実行」をクリックします。現在の環境は開発環境です。「公開」をクリックして、
運用環境用の 3 つのファイル (.env.js、.env.dev.js、および .env.prod.js) を作成します。

.env.dev.js

const UNI_APP = {
    
    
	UNI_BASE_API: 'dev-api', // 基准路径
	UNI_BASE_ENV: 'dev', // 环境变量
	UNI_BASE_URL: '/', // 打包路径 
	...
}

module.exports = UNI_APP;

.env.prod.js

const UNI_APP = {
    
    
	UNI_BASE_API: 'prod-api', // 基准路径
	UNI_BASE_ENV: 'prod', // 环境变量
	UNI_BASE_URL: '/', // 打包路径 
	...
}

module.exports = UNI_APP;

.env.js

let ENV_CONFIG = null;

if (process.env.NODE_ENV == "development") {
    
    
 	//开发环境
   ENV_CONFIG = require('.env.dev.js');
} else {
    
    
 	//生产环境
   ENV_CONFIG = require('.env.prod.js');
}

// 给环境变量process.uniEnv赋值
if (ENV_CONFIG) {
    
    
	process.uniEnv = {
    
    };
	for (let key in ENV_CONFIG) {
    
    
		process.uniEnv[key] = ENV_CONFIG[key];
	}
}

main.js

// 引入 .env.js 文件
import '.env.js'

自分のニーズに基づいて環境を変更する

この方法は、HBuilderX のデフォルトの動作環境を意識する必要はありません。

2 つのファイル .env.dev.js と .env.prod.js は変更されず、main.js ファイルも .env.js ファイルをインポートする必要があります。

.env.js

var EnvChannel = {
    
    
	DEVELOPMENT: 0, //开发环境
	TEST: 1, //测试环境
	PRODUCTION: 2 //生产环境
}

// 设置环境，更改参数可改变当前运行所用环境以及参数
const ENV_CHANNEL = 2;
let ENV_CONFIG = null;

if (ENV_CHANNEL == EnvChannel.DEVELOPMENT) {
    
    
	// 开发环境
	ENV_CONFIG = require('.env.dev.js');
} else {
    
    
	//生产环境
	ENV_CONFIG = require('.env.prod.js');
}

// 给环境变量process.uniEnv赋值
if (ENV_CONFIG) {
    
    
	process.uniEnv = {
    
    };
	for (let key in ENV_CONFIG) {
    
    
		process.uniEnv[key] = ENV_CONFIG[key];
	}
}

この方法では、複数の環境をセットアップし、必要に応じて現在実行中のパッケージの環境とパラメータを変更できますが、プロジェクトのデフォルトの現在の環境は変更されません。

ネットの情報を参考にまとめた記事なので、間違いやもっと良い方法があればご教示いただけると幸いです。