@vue/cli 3構築環境変数

に質問
開発中のWebアプリケーションには、複数の実行環境、開発環境(ローカルコードデバッグ)、テスト環境(導入テストコード)、正式な環境がある可能性があります.
異なる実行環境では、一部のコードが環境に応じて変化する必要がある場合があります.例:

//          token
const app_token = "111111"; 
//          token
const app_token = "222222";

コンストラクションスクリプトに異なるバージョンをパッケージ化して実装できます.
解決する
1.環境変数構成のコンパイルpackage.jsonに追加

{
	"scripts":{
		"build:test":"vue-cli-service  build --mode test",
		"build:product":"vue-cli-service  build --mode product"
	}
}

プロジェクトルートディレクトリに2つのファイルを追加し、

env.test

NODE_ENV = 'product'
VUE_APP_BUILD = 'test'

env.product

NODE_ENV = 'production'
VUE_APP_BUILD = 'product'

注:カスタム環境変数の名前付けにはVUE_が必要です.APP_ の先頭にある
NODE_ENV:「production」は、プロダクト化された構築構成を使用すること、すなわち構築プロセスがコード圧縮などのVUEを使用することを意味する.APP_BUILD:‘test’|‘product’カスタム環境変数,testは対応テスト環境構築,productは対応本番環境構築を示す.
ディレクトリ構造は次のとおりです.

|
| -- .env.test
| -- .env.product
| -- package.json

2.コード内

if(process.env.VUE_APP_BUILD === 'demo'){
	const app_token = "222222";
}else{
	const app_token = "111111";	
}

3.構築
パッケージテスト環境

> npm run build:test 

本番環境のパッケージ化

> npm run build:product