怎么設(shè)置process.env.NODE_ENV生產(chǎn)環(huán)境模式

這篇文章主要介紹了怎么設(shè)置process.env.NODE_ENV生產(chǎn)環(huán)境模式，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在開(kāi)始之前我先強(qiáng)調(diào)一下： process.env.NODE_ENV默認(rèn)只有兩種狀態(tài)即development和production，development指代本地開(kāi)發(fā)即localhost環(huán)境（本地的開(kāi)發(fā)），而production代表發(fā)布在任何服務(wù)上的服務(wù)（不管是dat、uat還是生產(chǎn)環(huán)境），node是不知道你服務(wù)是測(cè)試還是正式，除非你手動(dòng)指定。通常認(rèn)為都是線上環(huán)境。所以可以這樣認(rèn)為development代表本地開(kāi)發(fā)環(huán)境，production代表線上環(huán)境（包括dat、uat和生產(chǎn)環(huán)境等）

我為什么會(huì)強(qiáng)調(diào)這一點(diǎn)呢？

因?yàn)橛腥司尤挥胮rocess.env.NODE_ENV中的development來(lái)代表dat，uat等線上的測(cè)試環(huán)境，所以特別強(qiáng)調(diào)一下，development代表本地的開(kāi)發(fā)環(huán)境。

最近系統(tǒng)接入了公司的單點(diǎn)登錄，為了登陸成功后再跳回系統(tǒng)的主頁(yè)面，又申請(qǐng)了測(cè)試和沙箱的域名（之前都是直接用IP登的），本地開(kāi)發(fā)是配置的host。接入之后發(fā)現(xiàn)了一個(gè)非常麻煩的點(diǎn)就是給單點(diǎn)登錄傳的跳轉(zhuǎn)地址每次都要修改，開(kāi)發(fā)的時(shí)候要寫成開(kāi)發(fā)的域名，測(cè)試的時(shí)候要改成測(cè)試的域名，進(jìn)沙箱的時(shí)候要改成跳轉(zhuǎn)沙箱的域名，上線的時(shí)候又要改成線上的域名。特別是在測(cè)試階段，開(kāi)發(fā)測(cè)試來(lái)回切換，不勝其煩。
于是就想把它寫成配置文件，根據(jù)不同環(huán)境加載不同的配置，這樣就不用來(lái)回改了。這個(gè)時(shí)候，process.env就跳入了腦海。

扒一扒process.env

process對(duì)象是全局變量，它提供當(dāng)前node.js的有關(guān)信息，以及控制當(dāng)前node.js的有關(guān)進(jìn)程。因?yàn)槭侨肿兞?，它?duì)于node應(yīng)用程序是始終可用的，無(wú)需require()。

既然process都是一個(gè)對(duì)象了，env自然是它的一個(gè)屬性，這個(gè)屬性返回包含用戶環(huán)境信息的對(duì)象。在終端輸入node后，在輸入process.env可以看到打印出來(lái)的信息。

主角出場(chǎng) process.env.NODE_ENV

NODE_ENV不是process.env對(duì)象上原有的屬性，那它是怎么添加上的呢？

先舉個(gè)例子：

在package.json中，如下：

{
  "name": "yun-nobile",
  "version": "2.0.0",
  "description": "太保標(biāo)準(zhǔn)移動(dòng)端產(chǎn)品2.0，基于vue",
  "main": "yunprod.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production node yunprod.js build",
    "dev": "node yunprod.js dev"
  }
  ...
}

在我們執(zhí)行 npm run build 腳本命令時(shí)，會(huì)執(zhí)行cross-env NODE_ENV=production node yunprod.js build，把NODE_ENV設(shè)置為production，所以 process.env.NODE_ENV就被設(shè)置為production了 。

所以 process.env.NODE_ENV是我們執(zhí)行腳本命令時(shí)添加上去的一個(gè)全局環(huán)境變量。

process.env.NODE_ENV用來(lái)確定當(dāng)前所處的開(kāi)發(fā)階段。一般生產(chǎn)階段設(shè)為production，開(kāi)發(fā)階段設(shè)為develop，然后在腳本中讀取process.env.NODE_ENV。
運(yùn)行腳本時(shí)，可以這樣改變環(huán)境變量, 在package.json文件的scripts里面添加命令：

NODE_ENV=production node build.js

但是這個(gè)命令使用Windows的同學(xué)拉下代碼后就報(bào)錯(cuò)了，因?yàn)閃indows上面設(shè)置的方式不一樣

set NODE_ENV=production node build.js

但是不同電腦上不同的設(shè)置肯定是不行的呀，這個(gè)時(shí)候cross-env趕來(lái)救場(chǎng)了。
cross-env可以跨平臺(tái)的設(shè)置和使用環(huán)境變量

npm install --save-dev cross-env

接下來(lái)我們就可以通過(guò)cross-env來(lái)設(shè)置了

cross-env NODE_ENV=production node build.js

這樣設(shè)置之后，我們可以在腳本中使用process.env.NODE_ENV了，但是不能在模塊中使用，要想在模塊當(dāng)中直接使用，我們還需要一些配置

在 webpack 4+ 中，你可以使用 mode 選項(xiàng)：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

這樣就可以直接使用啦_
現(xiàn)在我們要在模塊中根據(jù)環(huán)境變量來(lái)配置不同的url了

let url = '';
 if (process.env.NODE_ENV === 'testing') {
   url = 'http://my.test.cn';
 } else if (process.env.alpord === 'alpord') {
   url = 'http://my.alpord.cn';
 } else if (process.env.NODE_ENV === 'production') {
   url = 'http://my.product.cn';
 } else {
   url = 'http://my.develop.cn';
 }

或者是

let url = '';
process.env.NODE_ENV === 'production'?url = 'http://my.product.cn':url = 'http://my.test.cn';

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么設(shè)置process.env.NODE_ENV生產(chǎn)環(huán)境模式”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!