vue2+axios在不同的环境打包不同的接口地址

一般有三个环境，一是开发环境，二是测试环境，三是正式环境，每个环境都有一个接口地址。

第一种方法：

开发情况下，我们只要在config/index.js里添加代理就可以，

proxyTable: {
        '/api':{
            target:'http://localhost:8088',
            pathRewrite:{
                '^/api':'/static/mock' //请求是以api开头的，会被替换成/static/mack
            }
        }
    }

需要注意的是

但是在测试和正式环境下都需要打包，接口地址都会走config/pro.env.js，无法区分这两种环境，所以我们采用不同的打包命令来区分，
首先在 package.json中，加入npm命令

"build": "node build/build.js",
"test": "node build/build.js",

在prod.env.js中

const target = process.env.npm_lifecycle_event;
if (target == 'test') {
    //测试
    var obj = {
        NODE_ENV: '"development"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'"http://10.99.9.9:8787"',
    }
}else {
    //线上
    var obj = {
        NODE_ENV: '"production"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'"http://10.99.9.36:8787/"',
    }
}
module.exports = obj;
/*module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: 'http://10.99.9.9:8787'
}*/

这样npm run build打包的就是正式环境，npm run test打包的就是测试环境。这样就不用每次打包时修改接口域名地址了。

第二种方法：

在config/prod.env.js文件中通过后缀名区分不同的环境，因为prod.env.js定义的常量可以在全局引用，省去了我们再定义全局变量的步骤。

'use strict'
module.exports = {
  NODE_ENV: '"production"',
API_PATH_DEV: “‘http://dev.gomain.com’”,
API_PATH_TEST: “‘http://test.gomain.com:’”,
API_PATH_PROD: “‘http://prod.gomain.com’”
}

在main.js中，引入axios，并根据当前的域名配置axios的baseURL

import axios from 'axios'
if (locatin.hostname === 'localhost') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'dev.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'test.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_TEST
} else if (locatin.hostname === 'prod.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_PROD
}

配置好axios后，每次执行 npm run build命令都会根据当前不同的环境而选用不同的域名地址。这样就可以达到只打包一次就能在不同的环境中运行了，

vue2+axios在不同的环境打包不同的接口地址

第一种方法：

第二种方法：

猜你喜欢