vue での .env ファイルの使用

1. 機能: vue プロジェクトで、.env ファイルを使用して、さまざまな環境でリクエストのドメイン名、環境変数などをロードします。

2. 設定 (.env.test ファイルを例にします):

①プロジェクトのルートディレクトリに新しい.env.testファイルを作成します
。 ② ファイルの内容は以下のとおりです。

変数の名前は次でVUE_APP_始まる必要があります

# just a flag
ENV = 'test'

# base api
#VUE_APP_BASE_API = '/api'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:8080'
#VUE_APP_BASE_API = 'http://192.168.XXX.XXX:80/'
#VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'
VUE_APP_BASE_API = 'http://XXX.XXX.XXX.XXX'

次のコードを構成ファイルに追加します。これを使用すると、ホット アップデートの速度を上げることができます。
VUE_CLI_BABEL_TRANSPILE_MODULES = true;

③ 変数を取得します。process.env.VUE_APP_XXX

3. ロード:

• .env.development: ローカルおよび開発環境で使用され、開発中にのみロードされます (名前は固定)。
• .env.production: 本番 (正式) 環境で使用され、本番環境でのみロードされます (名前は固定)。
• .env.test: テスト環境に使用され、テスト環境にのみロードされます (カスタム名)。
  
• コマンド構成:

書き込みpackage.json（主に元のコマンドの後に追加--mode 名称）

{
    
    
  "name": "vue3_work",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "serve-test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode test"
  }
}