前端工程環境變量設置方法

前端工程的環境變量，通常會使用cross-env在package.json的scripts中設置

"scripts": {
    "serve": "cross-env NODE_ENV=development META_BASE=meta.dev.com vue-cli-service serve --open",
    "build": "cross-env NODE_ENV=production META_BASE=meta.online.com vue-cli-service build"
}

這樣設置環境變量，有以下缺點：

1. scripts命令過長，書寫不方便

2. 變量混雜在一行，查看不方便

3. 多環境的環境變量引入，需要添加多個額外的命令

例如：在環境1和環境2各自有開發，生產和測試，要添加如下

"scripts": {
    "env1:dev": "cross-env NODE_ENV=development META_BASE=meta.dev.com vue-cli-service serve --open",
    "env1:pro": "cross-env NODE_ENV=production META_BASE=meta.online.com vue-cli-service build",
    "env1:test": "cross-env NODE_ENV=test META_BASE=meta.online.com vue-cli-service build",
    "env1:dev": "cross-env NODE_ENV=development META_BASE=meta.dev.com vue-cli-service serve --open",
    "env1:pro": "cross-env NODE_ENV=production META_BASE=meta.online.com vue-cli-service build",
    "env1:test": "cross-env NODE_ENV=test META_BASE=meta.online.com vue-cli-service build",
}

推薦使用env-cmd這個組件，來設置環境變量，集中在一個環境文件中，簡單方便，多環境書寫尤其方便。

"scripts": {
    "yy:dev": "env-cmd -e yy:dev node index.js",
    "yy:test": "env-cmd -e yy:test -f .env-cmdrc.js node index.js",
    "yy:prod": "env-cmd -e yy:prod node index.js",
    "hw:dev": "env-cmd -e hw:dev node index.js",
    "hw:test": "env-cmd -e hw:test node index.js",
    "hw:prod": "env-cmd -e hw:prod node index.js"
}

.env-cmdrc.js

在js文件中，可以編寫代碼，變量可以復用

let var1 = 'var1-env';
let var2 = 'var2-env';

module.exports = {
    "yy:dev": {
      "var1": `dev ${var1}`,
      "var2": `dev ${var2}`
    },
    "yy:test": {
      "var1": "test var1",
      "var2": "test var2"
    },
    "yy:prod": {
      "var1": "prod var1",
      "var2": "prod var2"
    },
    "hw:dev": {
        "var1": `hw:dev ${var1}`,
        "var2": `hw:dev ${var2}`
    },
    "hw:test": {
        "var1": "hw:test var1",
        "var2": "hw:test var2
    },
    "hw:prod": {
      "var1": "hw:prod var1",
      "var2": "hw:prod var2"
    }
}

環境變量使用，與package.json的script命令中-e后面的環境對應，上面配置的為dev環境

let env = process.env;

console.log('var1 ',env.var1);
console.log('var2 ',env.var2);