vue-cli 3環境変数と環境別パッケージ

第一歩:環境変数概念を理解する
私たちはルートディレクトリの下のファイルで環境変数を指定できます.

.env                #           
.env.local          #           ，    git   
.env.[mode]         #            
.env.[mode].local   #            ，    git   

環境変数ファイルには環境変数の「キー=値」だけが含まれています.

FOO=bar
VUE_APP_SECRET=secret //   VUE_APP_                   

カスタムVUE_を除くAPP_*変数以外にも、あなたのアプリケーションコードには常に使用可能な2つの特殊な変数があります.

NODE_ENV-会は「development」、「production」または「test」の一つです.具体的な値は、アプリケーションの動作モードに依存します.

BASE_URL-vue.co.nfig.jsのpublicPathオプションと一致します.つまり、あなたのアプリケーションが展開するベースパスです.

特定のモードのために準備された環境ファイル(例えば.env.production)は、一般的な環境ファイル(例えば.env)よりも優先度が高い.
パターン概念:パターンはVue CLIプロジェクトの重要な概念である.一般的にVue CLIプロジェクトには三つのデフォルトモードがあります.

developmentモードは、vue-cli-service serve

に使用されます.

productionモードは、vue-cli-service buildとvue-cli-service test:e 2 e

に使用される.

testモードは、vue-cli-service test:unit

に使用されます.
モードはNODE_に等しくない.ENVは、一つのモードが複数の環境変数を含むことができる.つまり、各モードはNODE_となります.ENVの値はモードの名前に設定されています.(再割り当て可能な変更)——例えばdevelopmentモードでNODE_ENVの値は「development」に設定されます.
envファイルに拡張子を追加することで、あるモードに特有の環境変数を設定できます.例えば、プロジェクトのルートディレクトリに.env.developmentというファイルを作成すると、このファイルで宣言された変数はdevelopmentモードでのみロードされます.
コマンドラインにデフォルトのモードを上書きします.例えば、ビルドコマンドに環境変数を使いたいなら、あなたのpackage.jsonスクリプトに参加してください.

"dev-build": "vue-cli-service build --mode development",

環境変数の使用:VUEのみAPP_.先頭の変数は、webpack.DefinePluginによってクライアント側のパケットに静的に埋め込まれます.すなわち、プロジェクトコードで使用されます.アプリケーションのコードでこのようにアクセスできます.

console.log(process.env.VUE_APP_SECRET)

コマンド、モード、環境変数の関係を理解して、プロジェクトの中のpackage.jsonにはよく次のようなコマンドが見られます.
Vue CLIプロジェクトでは、@vue/cli-serviceにvue-cli-serviceというコマンドがインストールされています.npm scriptsでvue-cli-serviceまたは端末からできます.modules/.bin/vue-cli-serviceがこのコマンドにアクセスします.vue-cli-service serve

  ：vue-cli-service serve [options] [entry]
  ：
  --open                
  --copy             URL       
  --mode           (   ：development)
  --host       host (   ：0.0.0.0)
  --port       port (   ：8080)
  --https      https (   ：false)

vue-cli-service build

  ：vue-cli-service build [options] [entry|pattern]

  ：
  --mode               (   ：production)
  --dest               (   ：dist)
  --modern                       
  --target      app | lib | wc | wc-async (   ：app)
  --name           Web Components        (   ：package.json    "name"         )
  --no-clean                  
  --report         report.html         
  --report-json    report.json         
  --watch             

以上は2つの一般的なcli命令で、彼らがデフォルトで対応するのはそれぞれdevelopmentとproductionモードです.他のコマンドも知りたいなら、アクセスできます.https://cli.vuejs.org/zh/guid... CLIサービス
それでは、テスト環境を梱包するためのモデルを作成します.
package.jsonを修正してコマンドを追加します.

"test": "vue-cli-service build --mode test"

追加.env.testファイルはプロジェクトルートで作成します.env.testファイルは、内容が

NODE_ENV='production'  //        (    )
VUE_APP_CURRENTMODE='test' //           
VUE_APP_BASEURL='http://***.****.com:8000' //        

修正項目のappiインターフェースファイルは私のプロジェクトの中で、一般的にappi.jsを作成してすべてのインターフェースurlを管理します.現地開発環境の中で代理でサーバーに接続しますので、urlをこのように書きます.

`${baseUrl}/apis/v1/login`,

ファイルの先頭に環境変数でbaseUrlを変更します.

let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
  baseUrl = "" 
} else if (process.env.NODE_ENV == 'production') {
  baseUrl = process.env.VUE_APP_BASEURL
} else {
  baseUrl = "" 
}

テスト環境のために包装する必要がある場合は、下の命令を実行して包装するだけです.

npm run test