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

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

1.修改config文件夹下的dev.env.js文件

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"http:开发时请求的url"'
}

2.修改config文件夹下的prod.evn.js文件

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API: '"http:生产时请求的url"'
}

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

const service = axios.create({
  withCredentials: true,
  baseURL: process.env.BASE_API,
  timeout: 15000 // 请求超时时间
})

5.执行不同的命令将使用不同的运行环境，如果在运行时报：‘cross-env’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。那就运行npm i cross-env --save-dev就可以了