如何动态配置前端contextpath路径

常见的前端包部署为前端执行npm run build后，打包生成的dist包给到运维，运维进行nginx配置进行页面之间的跳转等

若出现多个环境有不同的context path要求，常规都是前端提供多个打包命令，例如：npm run build:dev，npm run build:production，npm run build:test等。根据不同的环境配置不同的打包命令

需求背景：

由于项目甲方提供的服务器配置仅支持配置一个打包命令，而一个包需要分别部署在不同的环境上Url1：xxxx/blue/index.html、Url2：xxxx/green/index.html

实现思路：

1.前端静态资源环境得成相对路径

2.想办法获取到当前部署环境，在html中创建base，并且href值为当前部署环境地址

实现代码：

在index.html中插入以下片段：

 <script>
    // 获取当前路径并动态设置 base 路径
    (function () {
      if (window.useDynamicBase) {
        let base = document.createElement('base');
        let path = window.location.pathname;
        // 通过正则的方式匹配当前url的路径，例如：/admin/index.html 会匹配出 ['/admin/','admin']
        let contextPath = path.match(/^\/([^\/]+)\//);
        // 取第1位目录较准确
        base.href = contextPath ? `/${contextPath[1]}/` : '/';
        document.head.appendChild(base);
      }
    })();
  </script>

实现结果：

当路径为根时：

当路径为：xxxx/blue/#/welcome时：

PS：由于当前为hash模式，只会截取域名以及在#之前的url，但是如果为history模式时就会导致，当跳转到某一个页面时，就会获取某个页面的Url作为base的href值，所以当前的修改方案仅获取contextPath[1]的。（若后续有多级域名需就此继续修改）

let contextPath = path.substring(0, path.lastIndexOf('/') + 1);