vuejs根据环境自动更换打包地址

项目需求

  • 本地测试,测试服务器,线上服务器,用vuejs在不同平台上运行时都需要单独打包。那么如何实现一次打包在多个平台运行呢;
  • http与https访问时容易出现跨域问题,根据环境判断协议是否正确;

原理

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

解决方案

//1.定义所有环境服务器地址
const server={
    pro:"https://app.cps.com.cn/api/",//生产环境
    dev:"http://dev.app.cps.com.cn/api/",//测试环境
    other:"http://dev.cps.cn/api/"//其他环境
}
//2.获取当前访问域名,并根据域名判断当前环境,然后获取指定环境的服务器地址
var GLOBAL_DOMIN=""; //[全局]服务端接口访问
var GLOBAL_PROTOCOL=""; //[全局]当前服务接口使用的协议,以供访问其他公共域名时使用
const origin=location.hostname; //当前访问域名
const protocol=location.protocol; //当前域名使用的协议
for(var i in server){
    let item=server[i];
    if(item.indexOf(origin)>-1){
        // 域名匹配到了
        GLOBAL_DOMIN = item;
        GLOBAL_PROTOCOL = item.substring(0, item.indexOf(":")+1);
        // 配置中的协议与当前访问的协议不一致,跳转到配置中的协议
        if(GLOBAL_PROTOCOL != protocol){
            window.location.href = GLOBAL_PROTOCOL + location.href.substring(protocol.length);
        }
        break;
    }
}
//3. 特殊情况处理,如果没有在server变量中匹配到具体环境,则依次读取util、dev
if(!GLOBAL_DOMIN) GLOBAL_DOMIN=server.pro?server.pro:server.dev;
if(!GLOBAL_PROTOCOL) GLOBAL_PROTOCOL=protocol;
// 测试
console.log("GLOBAL_DOMIN",GLOBAL_DOMIN);
console.log("GLOBAL_PROTOCOL",GLOBAL_PROTOCOL);
export default
{
  DOMIN
}

此处评论已关闭