chinggo

在專案的開發、部署會遇到根據不同環境設定不同的參數

例如:

API 的 baseUrl，在開發、測試、正式環境都有不同的 Url 

在 .env.NODE_ENV 雖然可以區分 dev、prd 兩種環境

但在更多環境的情況下會不夠使用

以下例子是使用 cross-env 、 @nuxtjs/dotenv 兩個工具來完成

首先執行指令安裝兩個 npm 套件

npm install --save-dev @nuxtjs/dotenv cross-env

接著在專案跟目錄建立對應不同環境的設定檔，如:

接著在 nuxt.config.js 設定

buildModules: [
 ['@nuxtjs/dotenv', { filename: process.env.BASE ? `.env.${process.env.BASE}` : '.env' }]
],

裡面的 process.env.BASE 在 package.json 內設定，如:

"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generateDev": "cross-env BASE=dev nuxt-ts generate",
    "generateStaging": "cross-env BASE=staging nuxt-ts generate",
    "generatePrd": "cross-env BASE=prd nuxt-ts generate"
},

這樣在執行 generate 對應環境時，程式就會讀取各自 .env.${環境} 所設定的參數