【Vueの高度な知識】Vue CLI-3.0足場ツールを使用して、プロジェクトの開発環境と導入環境の環境変数をそれぞれ構成する方法

1.cli-3.0は、環境変数を作成するための4つの方法を提供しています.

ルートディレクトリに.envファイルを追加し、すべての場合に使用される構成を構成します(この存在の意味が分からないので、すべて必要な構成は必要ないでしょう).

ルートディレクトリに.env.local ファイルを追加し、すべての場合に使用される構成を構成します..envとの違いはローカルのみで、gitに追跡されません.

ルートディレクトリに.env.[mode] ファイルを追加し、あるモードに対応する構成を構成する.env.開発環境の構成を構成します.

ルートディレクトリに.env.[mode].localファイルを追加し、あるモードに対応する構成を構成します..env.[mode]との違いもローカルで有効になるだけで、gitに追跡されません.

デフォルトのpackage.jsonファイルの内容:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

2.モード
Vue CLIプロジェクトには、次の3つのモードがあります.

development:vue-cli-service serve、すなわち開発環境で

を使用する.

production:vue-cli-service buildおよびvue-cli-service test:e2eの下、すなわち、本環境では

が使用する.

test:vue-cli-service test:unitで

を使用
3.開発環境とオンライン配置環境の構成
開発環境構成プロセス:
1.vue.config.jsの同レベルディレクトリの下に作成する.env.development/.env.Productionファイル、ファイル名が完全に一致していることに注意してください.

NODE_ENV = 'development'
VUE_APP_NAME =  'App'
VUE_HOST_URL = 'http://www.52tech.tech'

 2. プロジェクトを再起動し、構成された環境変数が有効になることを保証します.
3.自分で定義した環境変数を使う
プロジェクトのsrcディレクトリで、自分で定義した環境変数を使用する場合は、VUE_APP_で始まる必要があります.例えばmainでjsからの直接出力:

console.log(process.env.VUE_APP_HOST_URL)  // http://www.52tech.tech

。