Vue プロジェクト構成環境変数

環境変数の理解:
フロントエンドとバックエンドが分離されているプロジェクトでは、テスト環境、グレースケール環境、正式環境など、多くのフロントエンド環境が存在します。プロジェクトが再びオンラインになると、プロジェクトは異なる環境にリリースされます。環境をパッケージ化する必要がある場合、各環境に対応するサーバーアドレスが異なるなど、手動で設定を変更するのは煩雑であり、間違いも避けられません。したがって、環境変数を使用して、異なる環境を区別します。

解決策: .env.test テスト環境、.env.development 開発環境、.env.production 正式環境、.env.long グレースケール環境などの .env.xxx ファイルをルートディレクトリに作成します。

ステップ 1: package.json ファイルと同じレベルにある .env.development ファイルと .env.production ファイルを作成します。これら 2 つは環境によって提供されます。上記の環境を満たすためには、以下を定義する必要があります。 .env .dev (開発環境) .env.prod (公式環境) .env.long (グレースケール環境) .env.test (テスト環境) などの env ファイルを自分で作成するステップ 2: .env でインターフェイスアドレスを構成
ここに画像の説明を挿入
する構成ファイルでは、VUE_APP_BASE_URL に値を割り当てます。複数の名前を記述することができますが、次のコードに示すように、VUE_APP_ (VUE_APP_xxx) で始まる必要があることに注意してください。

# env.dev文件
VUE_APP_BASE_URL = "//dev.api.saas.com"

#.env.prod文件
VUE_APP_BASE_URL = "//api.saas.com"

#.env.long文件
VUE_APP_BASE_URL = "//long.api.saas.com"

#.env.test文件
VUE_APP_BASE_URL = "//test.api.saas.com"

ステップ 3: package.json で
デフォルト構成を構成する

"scripts": {
    
    
    "serve": "vue-cli-service serve",//默认就是 development开发环境
    "build": "vue-cli-service build", //默认就是 production生产环境
  },

package.json でカスタム env ファイルを構成し、対応するserve コマンドと build コマンドを追加し、 --mode オプションフラグを使用して、コマンド --mode dev で使用されるデフォルトモードをオーバーライドします
。見つかった場合は、デフォルトで .env.develpment が使用され、サーバーの背後にある名前がランダムに取得されます。

package.json でコードを構成する

"scripts": {
    
    
    "serve:dev": "vue-cli-service serve --mode dev ",//就是 env.dev 环境
    "serve:prod": "vue-cli-service serve --mode prod", //就是 env.prod 环境
    "serve:long": "vue-cli-service serve --mode long",//就是 env.long 环境
    "serve:test": "vue-cli-service serve --mode test",//就是 env.test 环境
 
    "build:dev": "vue-cli-service build --mode dev",//就是 env.dev 环境
    "build:prod": "vue-cli-service build --mode prod",//就是 env.prod 环境
    "build:long": "vue-cli-service build --mode long",//就是 env.long 环境
    "build:test": "vue-cli-service build --mode test",//就是 env.test 环境
  },

Vue プロジェクト構成環境変数

おすすめ