NODE_ENV獲取環(huán)境變量

在vue搭建項目時，我們通常會使用 vue-cli 搭建腳手架，在開發(fā)過程中，我們需要根據(jù)開發(fā)環(huán)境和正式環(huán)境不同, 去請求不同域名下的后臺接口, 這時候, 我們需要根據(jù)環(huán)境不同來自動切換請求的域名。
在此我使用的是webpack 打包的打包工具，通過獲取NODE_ENV環(huán)境變量來進行操作，配置如下：

1.修改開發(fā)環(huán)境的配置 config/dev.env.js

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"https://api-dev"'
}

2.修改正式環(huán)境的配置 config/prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"https://api-prod"'
}

3.修改package.json 文件的script

"scripts": {
  "dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
}

4.接口調(diào)用時使用 process.env.BASE_API

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // request timeout
})

執(zhí)行不同的命令將使用不同的運行環(huán)境：

開發(fā)環(huán)境.png

生產(chǎn)環(huán)境.png