vue cli 3プロジェクトマルチ環境パッケージ構成

ここでは主に3つ以上の環境のパッケージング構成について議論し,2つだけであればNODE_ENVがdevelopment,productionとなり,一般的には比較的簡単であるが,以下では複数の環境の構成を参照し,2つのクラス比を参照することができる.
まずpackageを構成します.json

{
    ...
    "scripts": {
        //   
		"dev": "vue-cli-service serve",
        //   
		"build:dev": "vue-cli-service build --mode development",
        //   
		"build:pro": "vue-cli-service build --mode production",
        //   2
		"build:feat": "vue-cli-service build --mode feat",
        //   2
		"build:fix": "vue-cli-service build --mode fix"
	},
    ...
}

デフォルトでは、1つのVue CLIプロジェクトには3つのモードがあります.

developmentモードvue-cli-service serve

用

productionモードは、vue-cli-service build及びvue-cli-service test:e2e

に用いる.

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

用--modeオプションパラメータは、コマンドラインのデフォルトのモードを上書きします.
次に新規作成する.Env先頭のファイル
プロジェクトルートの作成

#     .env.feat
NODE_ENV = 'feat'

#     .env.fix
NODE_ENV = 'fix'

#は注記で、ファイル名の接尾辞はpackage.jsonにmodeが配置されているのと同じで、冒頭は.envに統一されています.このように構成した後、process.env.NODE_ENVによって異なる環境での構成を判断することができる
あるいは他の変数で判断することもできます

#     .env.fix
NODE_ENV = 'production'
VUE_APP_BASE = 'fix'

process.env.VUE_APP_BASEによって変数を取得して対応する構成を行うことができ、NODE_ENVはdevelopmentであってもよい.変数はVUE_APP_の先頭でなければならない.BASE_URL変数は、vue.config.jsのpublicPathオプションと一致します.つまり、アプリケーションが導入するベースパスです.

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

最後に、環境変数とモードに基づいて構成を変更します.
異なる人の異なるプロジェクトは異なる需要があって配置を変更して、主に2種類に分けて、1つはパッケージの配置で、つまり異なる環境によって異なるパッケージの配置を行って、vue.config.jsを修正します;1つはプロジェクト構成であり、一般的には異なるリクエストアドレスを変更する.項目内およびvue.config.jsのいずれもprocess.envの対象属性NODE_ENVまたはVUE_APP_の先頭を取得して判断し、パーソナライズ処理を行うことができる.