vue项目如何通过前端实现自动识别并配置服务器环境地址

前言：

一般来说，一个web项目的生产环境和测试环境的服务器地址一旦确定下来，很少会频繁变动的。那么就可以单独写一个脚本文件，通过当前访问的域名来判断当前的访问环境，然后再通过一定的规则获取对应的服务器地址。如此一来，只要设计好服务器地址适配文件，那么只需要打一次包，就可以自动区分不同的服务器环境了。你不用再为每次打包上传不同环境都要手动改服务器地址而烦恼，也不会再出现忘了改配置文件而连接到错误的服务器上。

解决方案：

配置所有环境服务器地址变量——获取当前访问域名——根据域名判断是否包含在服务器地址变量中，如果有则使用该服务器地址，否则使用默认配置地址。

示例代码：

//1.定义所有环境服务器地址
const server={
    pro:"https://pro.xxx.com/api/",//生产环境
    dev:"http://dev.xxx.com/api/",//测试环境
    util:"http://util.xxx.com/api/"//其他环境，可以为空，为空则适配到测试环境
}
//2.获取当前访问域名，并根据域名判断当前环境，然后获取指定环境的服务器地址
var DOMIN="";//服务端接口访问跟路径
const origin=location.hostname//当前访问域名
for(var i in server){
    var item=server[i]
    if(item.indexOf(origin)>-1){
        DOMIN=item
    }
}
//3. 特殊情况处理，如果没有在server变量中匹配到具体环境，则依次读取util、dev
if(!DOMIN) DOMIN=server.util?server.util:server.dev
console.log("DOMIN",DOMIN)
export default
{
  DOMIN
}

对于这种方案，可以很方便的在服务器端直接修改 server 对象中对应环境的值，无论是协议头、域名还是端口都可以在服务器上直接修改而不用再次打包。

还有更好的方案么？

上边的方案中，在同一个脚本中定义了环境服务器地址对象和环境判断适配的业务逻辑，如果直接把这个给后端同事去修改，那么还是有一定风险的。那么最好还是把服务器环境地址的配置写到一个json文件中，这样直接给后端同事修改配置文件就好了，这样就不会动到业务逻辑了。示例代码如下：

server.json

{
  "pro":"https://pro.xxx.com/api/",
  "dev":"http://dev.e-mallchina.com/api/",
  "util":"https://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN="";//定义服务端接口访问跟路径变量
const origin=location.hostname//当前访问域名
//读取服务器地址配置文件
$.ajax({
    url:"./static/utils/server.json",
    async:false,
    dataType:"json",
    success:function(server){
        //遍历服务器地址配置文件，根据当前访问域名判断环境，然后获取指定的服务器地址
        $.each(server, function(key,data) {
            if(data.indexOf(origin)>-1){
                DOMIN=data
            }
        });
        //如果没有匹配到指定的服务器地址，那么依次取util/dev（util可以为空）
        if(!DOMIN) DOMIN=server.util?server.util:server.dev
    }
});
export default
{
  DOMIN
}

注意：

读取json文件时，需设置为同步，即 async:false ，不然是无法赋值到外边的DOMIN变量的。

更保险的方案：

一般来说，生产环境的服务器地址都是不会轻易修改的，那么可以把生产环境的服务器地址写在业务逻辑处理文件中，配置文件只开放测试环境和其他环境给后端，然后在业务逻辑处理文件中做好异常兼容处理，那么随便后端折腾这个配置文件也不会影响到生产环境了。

server.json

{
  "dev":"http://dev.xxx.com/api/",
  "util":"http://xxx.xxx.com:8080/api/"
}

utils.js

var DOMIN = ""; //定义服务端接口访问跟路径变量
const proServer = "https://xxx.xxx.com/api/"
const origin = location.hostname //当前访问域名
//根据当前访问域名判断并获取对应环境的服务器地址
if(proServer.indexOf(origin) > -1) {
    //生产环境
    DOMIN = proServer
} else {
    //非生产环境则读取服务器地址配置文件
    $.ajax({
        url: "./static/utils/server1.json",
        async: false,
        dataType: "json",
        success: function(server) {
            //遍历服务器地址，判断当前访问环境并获取对应的服务器地址
            $.each(server, function(key, data) {
                if(data.indexOf(origin) > -1) {
                    DOMIN = data
                }
            });
            //如果没有匹配到指定的服务器地址，那么依次取util/dev（util可以为空）
            if(!DOMIN) DOMIN = server.util ? server.util : server.dev
            //未获取到服务器地址的异常处理
            if(!DOMIN) {
                alert("服务器地址配置错误,请检查")
            }
        },
        error: function(xhr) {
            alert("服务器地址文件访问错误： " + xhr.status + " " + xhr.statusText);
        }
    });
}
export default {
    DOMIN
}

注意：上边已经做了异常处理，虽然不做也可以，还是建议保留这几行代码，对后端同事会比较友好一些。