webpack 4シリーズ第8編（環境変数と多環境構成）

開発時に多環境に遭遇する可能性があります。例えば開発時に開発サーバがあります。http://localhost:8000オンラインの時に正式な環境のサーバーがあります。http:www.xxxx.com、私達は異なる環境を判断して異なるサーバーを選ぶ必要があります。vue開発の中で、process.envというものをよく見られます。そのプロcessは一体何ですか？nodeでは、グローバル変数processが表しているのは現在のnodeプロセスです。process.envはシステム環境に関する情報を含んでいます。でもprocess.envにはNODE_は存在しません。ENVというものは（webpackでこのprocessを印刷して、出力結果に見えます）。NODE_ENVはユーザーがカスタマイズした変数です。（もちろん他の変数名でもいいですが、一般的には変数名としてNODE＿ENVを取っています。）webpackでは、生産環境や開発環境を判断するためのものです。
環境変数をwebpackで取得します。
1、package.jsonに設定する

"scripts": {
    "build": "cross-env NODE_ENV=prod webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server"
}

npm run buildを実行すると、これは環境変数cross-env NODE_ENV=prodをprodとして設定し、NODE_ENVは、プラットフォームにまたがって環境変数を設定し、使用するスクリプトであり、インストールが必要である。このようにwebpackでcross-envを印刷してください。

console.log(process.env.NODE_ENV)  //prod

もちろんprocess.env.NODE_ENVを実行している時のこの値がdevです。2、webpackで直接設定する：このようにnpm run dev、または異なる環境を区別するために、process.env.NODE_ENV = 'prod'を別のファイルに入れて使用する。prod.env.js

'use strict'

module.exports = {
  NODE_ENV: '"prod"'
}

dev.env.js

'use strict'

module.exports = {
  NODE_ENV: '"dev"'
}

またはテスト環境に来ています。
test.env.js

'use strict'

module.exports = {
  NODE_ENV: '"test"'
}

webpack.co.nfig.js:

const envconfig = require('./dev.env')

process.env.NODE_ENV = envconfig .NODE_ENV
console.log(process.env.NODE_ENV)  //dev

じゃ、vue開発を持って、私達はmain.jsの中で環境変数を印刷します。

console.log(process.env.NODE_ENV)  //undefined

結果はundefinedです。どうしてwebpack.co.fig.jsに値がありますか？ここに来たらundefinedですか？これはvueがブラウザの端で実行されていますが、processはnodeの環境端ですので、nodeに基づいてパッケージをコンパイルする過程でprocessが使えます。vueでは単独で使用できません。問題が来ました。バックエンドで要求する時、環境要求のサーバーが違っています。環境変数はどうやって区別しますか？webpackのDefinePluginを使えばいいです。
DefinePluginは何ですか？
公式文書によると、DefinePluginはグローバル変数を作成し、コンパイル時に設定することができますので、グローバル変数を使って開発環境と正式環境、または他の環境を区別することができます。vue-cliの中の配置で言います。

const env = require('./prod.env')

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': env
    })
]

NODE_ENVは一つのオブジェクトです。このオブジェクトの中でキーパッドの番号をグローバル変数として定義してもいいです。上に書いたように、env.jsファイルのように。このようにvue開発中のmain.js（または他のjs.vueファイル）はprocess.env.NODE_を通過することができます。ENVは価値を取りに来ました。バックグラウンドで要求を送る時とは違ったサーバーでいいです。env.jsファイルに配置してください。prod.env.js。

'use strict'

module.exports = {
  NODE_ENV: '"prod"',
  BASE_API:'"https://www.xxxx.com"'
}

vue開発中、process.env.BASE_APIは異なる環境によって異なる値を取ることができる。