Nuxt之不一樣環境區分

背景

在通常狀況下，咱們的項目確定須要區分不一樣環境，來決策其對應的策略，包括但不侷限於接口轉發地址、打包策略、日誌輸出策略等。那麼拋開具體要設置哪些內容，咱們須要先要有區分環境的能力才能作這些事情。那麼Nuxt提供給咱們這樣的基本能力了麼？答案是確定的。

下面咱們以不一樣環境確定會不同的接口轉發地址爲例，進行相關的說明。

nuxt.config.js

用Nuxt框架開發的同窗相信對這個配置文件都不陌生，那麼本文也會涉及到這裏面的一個具體配置就是axios的配置。配置的地址取決於一個變量，這個變量是不肯定的。配置代碼以下:

備註：關於axios以及proxy如何配置參考我另外的文章哦。

export default {
 modules: ["@nuxtjs/axios"],
 axios: {
        // 是否容許跨域
        proxy: true,
        // 最多重發三次
        retry: {
            retries: 3,
        },
        // 非線上環境開啓debug
        debug: !isProd,
        // 是不是可信任
        withCredentials: true,
        timeout: 2000,
    },
proxy: {
        "/api": {
            changeOrigin: true,
            target: targetUrl,
            pathRewrite: {
                "^/api": "/api",
            },
        }
   }
}
複製代碼

關鍵參數

isProd , targetUrl

其中不一樣環境的地址咱們能夠作靜態維護，根據環境標識來取用對應的環境地址，而是不是生產環境，也能夠經過環境標識來控制。

假設咱們的不一樣環境的配置字典是這樣的（建議單獨寫一個配置文件的config.js）。

備註：其中預發環境建議與生產環境除了域名配置不同，其餘儘可能保持一致，能夠前置儘量的奇怪問題。

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 是如何定義出來的呢？咱們根據項目開發的不一樣階段區分處理。

開發階段設置變量

在npm中有這樣一個開源庫，能夠實現跨平臺的設置node變量，它即是cross-env，npm模塊地址：www.npmjs.com/package/cro… ，怎麼安裝就不贅述了。

由於本地開發通常執行的是npm run dev,而默認的包文件的執行命令中是沒有區分環境的配置的，因此簡單處理，咱們能夠直接在包文件的可執行腳本中增長對應的可執行腳本，目的就是我不想由於切換環境不斷的修改個人配置文件或者經過註釋選擇修改哪一個文件，另外這一點也是更符合開發習慣的，在通常狀況下，咱們也不會各個環境來回切換調試一個功能。

package.json 中追加的可執行命令：其中咱們定義的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"
 }
複製代碼

部署階段

部署階段，做爲常識，咱們知道，最終必定是服務器進程守護的部署，不會是npm run start 這種方式部署。因此對應的引入pm2是基本選型，而pm2的生態下是支持使用配置文件部署的。你能夠在根目錄下建立ecosystem.config.js，而後配置基本的內容以下：其中以env_xx 的部分就是在pm2中支持配置環境變量的部分，相比cross-env,設置變量的方式更加簡潔，是個js基本對象格式的。保持也是設置NODE_ENV以及對應的env標識便可。

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 來指定使用哪一個環境。我爲了方便運維，在習慣上，將默認的不設置env 設置爲啓動生產環境配置。pm2 start，這種狀況下會使用env 這個的對應配置。

小結

本文介紹就到這裏了，但願你們能夠清楚的知道如何根據環境標識自定義設置和使用一些環境差別變量，而且發掘和利用好這一點。