vue-cli 3.0複数の開発環境での環境変数の構成方法

複数の環境変数を構成する必要がある理由

一つの製品の開発過程では、一般的にこのような過程を経験する.ローカルで配布--テストバージョンの配置--テスト--事前にオンライン--正式にオンラインになった.対応する各段階のサーバーアドレス、インタフェースアドレス...違います.では、私たちはこのような状況をどのように処理する必要がありますか.

環境変数の構成方法

vue-cli 3.0足場構築プロジェクトルートディレクトリに.env.[model]ファイルを新規作成し、modelを変数とし、このmodelの変数値によって現在どの環境に属しているかを判断できます.model必要に応じて変更できます.このファイルには対応するキー値のペアが書かれています.ルートディレクトリに.env.[model]を作成するには、どのくらいの環境が必要ですか.ファイルは次の図のようになります.
.env.prodファイル:NODE_ENV = "production" VUE_APP_URL = "prod".env.devファイル:NODE_ENV = "production" VUE_APP_URL = "dev"注意:環境のフィールドを構成するにはVUE_が必要です.アプリの冒頭で、webpackに認識されます.
今、プロファイルに来ました.このプロファイルの機能は、現在のパッケージ環境が本番かテストか、ローカルかを判断するためです.もちろん、多くの環境があります.プロファイルでは、process.env.VUE_APP_URLというグローバルフィールドを使用して環境を判断し、対応するインタフェースアドレスを一致させます.注意上のNODE_ENV = "production"は省略できませんが、vue-cli 3.0はNODE_ENV = "production"に基づいて生産環境かどうかを判断します.これを変更するとデフォルトNODE_ENV = "developmentになります.developmentとproductionモードでパッケージされたパッケージ構造が異なり、一貫性のため、プロファイルの最初のフィールドはNODE_ENV = "production"に設定する必要があります.
package.jsonファイルの下のスクリプト

    "start": "vue-cli-service serve --mode location",
    "dev": "vue-cli-service build --mode dev",
    "prod": "vue-cli-service build --mode prod"

scriptスクリプトnode dist-start.jsは、プロジェクトをパッケージ化した後、ローカルで起動して表示する必要があるコードです.無視できますよ.
作成された.env.[model]ファイルについては、ファイル名のmodel対応package.jsonファイルのパッケージスクリプト--model [model]が記載されています.例えば、私が今正式な環境をパッケージしたい場合、正式な環境に対応します.env.[model]は.env.prodです.package.jsonのscriptに"prod": "vue-cli-service build --mode prod"を追加し、prodこの対応するプロファイル名のmodelを追加します.これにより、webpackパッケージ時に自動的にこのファイルを追跡し、その中の各種構成フィールドを読み取り、プロジェクト内の任意の位置でprocess.env.xxを通じてxx構成属性を取得することができます.package.jsonファイルスクリプトは次のように構成されています.
これで、対応するスクリプトコマンドを実行するだけで、対応する環境のプロジェクトコードをパッケージ化できます.たとえば、prod環境のプロジェクトをパッケージ化する必要があります.コンソールでnpm run prodを実行すると、正式な環境パッケージを実行できます.npm run devを実行すると、テスト環境をパッケージ化できます.このモードは、導入の自動化にも使用できます.
間違っていたり、書いていないところがあれば、質問がある人は質問を歓迎します.
転載先:https://juejin.im/post/5cd15a576fb9a03238107ccb