Nuxt不同環(huán)境如何區(qū)分的方法

更新時間：2021年05月14日 10:08:20 作者：余杭子曰

在一般情況下，我們的項(xiàng)目肯定需要區(qū)分不同環(huán)境，那么Nuxt提供給我們這樣的基本能力了么，下面我們就一起來了解一下

背景

在一般情況下，我們的項(xiàng)目肯定需要區(qū)分不同環(huán)境，來決策其對應(yīng)的策略，包括但不局限于接口轉(zhuǎn)發(fā)地址、打包策略、日志輸出策略等。那么拋開具體要設(shè)置哪些內(nèi)容，我們需要先要有區(qū)分環(huán)境的能力才能做這些事情。那么Nuxt提供給我們這樣的基本能力了么？答案是肯定的。

下面我們以不同環(huán)境肯定會不一樣的接口轉(zhuǎn)發(fā)地址為例，進(jìn)行相關(guān)的說明。

nuxt.config.js

用Nuxt框架開發(fā)的同學(xué)相信對這個配置文件都不陌生，那么本文也會涉及到這里面的一個具體配置就是axios的配置。配置的地址取決于一個變量，這個變量是不確定的。配置代碼如下:

備注：關(guān)于axios以及proxy如何配置參考我另外的文章哦。

export default {
 modules: ["@nuxtjs/axios"],
 axios: {
        // 是否允許跨域
        proxy: true,
        // 最多重發(fā)三次
        retry: {
            retries: 3,
        },
        // 非線上環(huán)境開啟debug
        debug: !isProd,
        // 是否是可信任
        withCredentials: true,
        timeout: 2000,
    },
proxy: {
        "/api": {
            changeOrigin: true,
            target: targetUrl,
            pathRewrite: {
                "^/api": "/api",
            },
        }
   }
}

關(guān)鍵參數(shù)

isProd , targetUrl

其中不同環(huán)境的地址我們可以做靜態(tài)維護(hù)，根據(jù)環(huán)境標(biāo)識來取用對應(yīng)的環(huán)境地址，而是否是生產(chǎn)環(huán)境，也可以通過環(huán)境標(biāo)識來控制。
假設(shè)我們的不同環(huán)境的配置字典是這樣的（建議單獨(dú)寫一個配置文件的config.js）。
備注：其中預(yù)發(fā)環(huán)境建議與生產(chǎn)環(huán)境除了域名配置不一樣，其他盡量保持一致，可以前置盡可能的奇怪問題。

export default {
    dev: "http://dev.xxx.net/",
    stable: "https://stable.xxx.net/",
    pre: "https://pre.xxx.com/",
    prod: "http://xxx.com/",
}

那么使用定義變量便是如下：

const isProd = process.env.NODE_ENV === "prod";
const targetUrl = serverConfig[ process.env.NODE_ENV || 'stable'];

那么process.env.NODE_ENV 是如何定義出來的呢？我們根據(jù)項(xiàng)目開發(fā)的不同階段區(qū)分處理。
開發(fā)階段設(shè)置變量

在npm中有這樣一個開源庫，可以實(shí)現(xiàn)跨平臺的設(shè)置node變量，它便是cross-env，npm模塊地址：https://www.npmjs.com/package/cross-env，怎么安裝就不贅述了。

因?yàn)楸镜亻_發(fā)一般執(zhí)行的是npm run dev,而默認(rèn)的包文件的執(zhí)行命令中是沒有區(qū)分環(huán)境的配置的，所以簡單處理，我們可以直接在包文件的可執(zhí)行腳本中增加對應(yīng)的可執(zhí)行腳本，目的就是我不想因?yàn)榍袚Q環(huán)境不斷的修改我的配置文件或者通過注釋選擇修改哪個文件，另外這一點(diǎn)也是更符合開發(fā)習(xí)慣的，在一般情況下，我們也不會各個環(huán)境來回切換調(diào)試一個功能。

package.json 中追加的可執(zhí)行命令：其中我們定義的NODE_ENV的值就是我們在配置文件的鍵值，請保持它們的一致性。

 "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "dev-stable": "cross-env NODE_ENV=stable nuxt",
    "dev-pre": "cross-env NODE_ENV=pre nuxt",
    "dev-prod": "cross-env NODE_ENV=prod nuxt"
 }

部署階段

部署階段，作為常識，我們知道，最終一定是服務(wù)器進(jìn)程守護(hù)的部署，不會是npm run start 這種方式部署。所以對應(yīng)的引入pm2是基本選型，而pm2的生態(tài)下是支持使用配置文件部署的。你可以在根目錄下創(chuàng)建ecosystem.config.js，然后配置基本的內(nèi)容如下：其中以env_xx 的部分就是在pm2中支持配置環(huán)境變量的部分，相比cross-env,設(shè)置變量的方式更加簡潔，是個js基本對象格式的。保持也是設(shè)置NODE_ENV以及對應(yīng)的env標(biāo)識即可。

module.exports = {
  apps: [
    {
      name: 'demo_pc',
      exec_mode: 'cluster',
      instances: '2', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      log_date_format:'hxpc_YYYY-MM-DD HH:mm Z',
      log_file:'pc.log',
      out_file: 'out.log',
      env: {
        "NODE_ENV": "prod",
      },
      env_dev: {
        "NODE_ENV": "dev",
      },
      env_prod : {
         "NODE_ENV": "prod"
      },
      env_pre : {
        "NODE_ENV": "pre"
      },
      env_stable : {
        "NODE_ENV": "stable"
     }
    },
   ]
 }

然后在啟動時，可以使用pm2 start --env stable 來指定使用哪個環(huán)境。我為了方便運(yùn)維，在習(xí)慣上，將默認(rèn)的不設(shè)置env 設(shè)置為啟動生產(chǎn)環(huán)境配置。pm2 start，這種情況下會使用env 這個的對應(yīng)配置。