vue-cli3.0配置各环境下请求域名

1、在根目录新建四个文件

项目跟路径.png

1.1（.env文件）

初始化设置全局对象process.env属性
vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_URL：接口请求的域名

    NODE_ENV = development
    BASE_URL = '/'
    VUE_APP_URL = 'https://***.******.***'

1.2（.env.dev文件）

开发环境下的配置文件

    NODE_ENV = development
    BASE_URL = '/'
    VUE_APP_URL = 'https://www.development.com'

1.3（.env.prod文件）

生产环境下的配置文件

    NODE_ENV = production
    BASE_URL = '/'
    VUE_APP_URL = 'https://www.production.com'

1.4（.env.test文件）

测试环境下的配置文件

    NODE_ENV = test
    BASE_URL = '/'
    VUE_APP_URL = 'https://www.test.com'

2、在package.json中配置scripts 关联打包部署对应的.env文件

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
 },

对应打包运行的命令：
npm run build //开发环境
npm run build:test //测试环境
npm run build:prod //生产环境

3、在axios中应用

创建axios实例，通过axios.create()创建实例，配置实例中baseURL属性的值为 process.env.VUE_APP_URL即可在各环境下请求对应的接口域名

const instance = axios.create({
    baseURL: process.env.VUE_APP_URL,
    timeout: 5000,
    transformRequest: data => {
      return qs.stringify(data, { allowDots: true })
    }
})