nuxt.js 複数の環境変数の設定

1. はじめに

一般的に、私たちのプロジェクト開発では、次の3つの環境が通常あります。

• 開発環境はtest環境（テスト）とも呼ばれます。
• RC環境はプレリリース環境（ rc ）とも呼ばれます。
• production環境

2. シナリオ

次に、異なる環境で異なるapiインターフェースを区別する必要がある状況があります。たとえば、

• テスト環境(test) api=test.ydhtml.com

• プレリリース環境 ( rc) api=rc.ydhtml.com

• オンライン環境(production) api=ydhtml.com

3. 環境を整える

次に、プロジェクトのルートディレクトリに次の内容のenv.jsファイルを作成します。

モジュール.エクスポート = {
    テスト： {
        モード: 'テスト'
    },
    rc: {
        モード: 'rc',
    },
    製品: {
        モード: 'prod'、
    }
}

対応する環境を設定したら、 package.jsonの下のscriptsにパッケージ化コマンドを追加します。

次のように：

"build:test": "cross-env MODE=test nuxt build",
"build:rc": "クロス環境 MODE=rc nuxt ビルド",
"build:prod": "クロス環境 MODE=prod nuxt ビルド",

3.1 環境変数の挿入

nuxt.config.jsファイルを開き、次のコードを追加します。

env = require('./env') が必要です
モジュール.エクスポート = {
    環境: {
        NUXT_ENV: env[プロセス.env.MODE]
    }
}

4. 最後に

最後に、それをページで使用します。コードは次のとおりです。

定数API = {
    製品: 'http://ydhtml.com',
    テスト: 'http://test-ydhtml.com',
    rc: 'http://rc-ydhtml.com'
}

定数baseURL = api[process.env.NUXT_ENV.MODE]

nuxt.js マルチ環境変数設定に関する記事はこれで終わりです。 nuxt.js マルチ環境変数設定に関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。 今後とも 123WORDPRESS.COM をよろしくお願いいたします。