项目需求

• 本地测试，测试服务器，线上服务器，用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
}

最后更新于  2021-10-18 14:44:51  并被添加「」标签，已有 1276 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处