使用Javascript（开发、API和生产）在前端创建基本URL

如何使基本url与http、https、localhost、端口和实际域一起工作，而不考虑开发和部署？

我想使基本url在所有场景或条件下工作，而不考虑http/https协议、端口、，本地主机和实际域，无论是在开发中还是在部署/生产中

因此，我提出了一个基本的方法，通过使用简单的javascript来处理本地服务和为生产构建

基础知识

var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;

此基本url将在运行时计算，并决定实际协议和实际主机名

前进

如果您想为具有不同微服务的不同端口更改API调用的端口，也可以使用此函数

function changePortForAPI(baseUrl, port) {
    var host = baseUrl.split("//");
    var res = host[1].split(":");
    res[1] = port;
    var result = host[0]+"//"+res[0] +":"+ res[1];
    return result;
}

注意：此“changePortForAPI（baseUrl，port）”用于开发目的，因为在构建时，API调用不使用端口，因为它将由Apache和Nginx等服务器处理

因此，要检测本地主机/开发部件并使用不同的端口进行API调用，您可以使用

function inDevelopment(baseUrl){
    var index = baseUrl.indexOf("localhost");
    if(index > 0){
      return true;  
    }
    else{
      return false;
    }
}

在检测到开发模式后，您可以使用“changePortForAPI”函数进行API调用，该函数在开发和部署时也可以正常运行

编辑：

function inDevelopment(baseUrl){
    var host = baseUrl.split("//");
    var index = host[1].indexOf(":");
    if(index > 0){
      return true;  
    }
    else{
      return false;
    }
}

---

<> P>此编辑功能很好，当您考虑提交更改时，您使用的是与其他开发人员分开的网络IP。

自答是好的，但在实际场景中不总是实用的。它可以不是localhost，而是其他内容，如主机中指定的自定义域或本地网络IP。在环境变量中显式指定基本URL更有意义，这是特定于框架的工具所支持的，因为这是必须的。开发目的，因为在构建时，API调用不使用端口，因为它将由Apache和Nginx等服务器处理-将API端点映射到另一个端口上的服务器可以由Vue CLI提供的代理服务器处理，等等，但我认为window.location对于获取协议和主机方面的实际场景来说是不错的，因为它还捕获网络上指定的主机或本地IP。出于开发目的，用户可以更改此行

var index=baseUrl.indexOf（“localhost”）至
var index=baseUrl.indexOf（“127.0.0.1”）或
var index=baseUrl.indexOf（“192.168.34.3”）
检测未显影模式。因为它只是JavaScript，与前端框架无关。因为每个都有单独的方法，但这种简单的方法可以在不考虑框架和域服务器的情况下工作。JS与框架无关，但应用程序与框架无关，它们与特定的设置相关。出于开发目的，用户可以更改这一行，然后您将得到本地修改的文件，而这些文件不应意外提交。我多次遇到这个问题，所以我从自己的经验中知道。是的，我知道JS与框架无关，这就是为什么我提到“不考虑框架”。但谢谢你的好消息，我们不能做这件事。由于本地IP等，但我有一个黑客为此，它的测试。函数inDevelopment（baseUrl）{var host=baseUrl.split（“/”）；var index=host[1]。indexOf（“：”）；if（index>0）{return true；}else{return false；}}我将把它添加到