vue项目在不同环境下请求不同接口地址

NODE_ENV获取环境变量

在vue搭建项目时，我们通常会使用 vue-cli 搭建脚手架，在开发过程中，我们需要根据开发环境和正式环境不同, 去请求不同域名下的后台接口, 这时候, 我们需要根据环境不同来自动切换请求的域名。
在此我使用的是webpack 打包的打包工具，通过获取NODE_ENV环境变量来进行操作，配置如下：

1.修改开发环境的配置 config/dev.env.js

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

2.修改正式环境的配置 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.接口调用时使用 process.env.BASE_API

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

执行不同的命令将使用不同的运行环境：

开发环境.png

生产环境.png