移动端项目带版本路径实现的三种方式

移动端发布时候如果不更新路径,那么一些静态资源缓存在本地,新发布的功能便加载不到。为了解决这个问题,下面介绍两种方式。

1.修改项目入口地址

每次发布项目时,打的包里面都需要有v1.0.1这种版本号的文件夹路径,比如正常的前端资源目录为:

带版本号的前端资源路径为:

项目入口地址加上或者修改版本路径/*/v1.0.1/*/即可。

2.nginx重定向

这种方式在修改不了项目入口地址时使用,nginx需要增加一个入口地址的location精确匹配,比如

#/aaa/bbb/index.html为入口地址	
location = /aaa/bbb/index.html {
			access_by_lua_file /usr/local/aaa/bbb/ccc/ddd.lua;
			set_by_lua_block $version {
				local tempCache = ngx.shared.tempCache ;
				return tempCache:get("version")
			}
			rewrite ^/(.*)$ https://aaa/bbb/$version/index.html redirect;
	}

 其中的lua脚本主要功能是访问http接口获得发布的版本号,然后重写项目入口地址,前提是nginx可以访问通项目入口地址。

ddd.lua内容如下:

local function newClient()
	local httpC = http.new()
    return httpC
end
local handler = function (premature)
    local httpc = newClient()
    local resp,err = httpc:request_uri("http://10.1.1.1:8888", {
        method = "GET",
        path = "/xxx/xxx",
        headers = {
                ["aaa"] = "xxx",
                ["bbb"] = "xxx"
        }
    })
    local result = json.decode(resp.body).data
	tempCache:set("version", result)
end
handler()


3.使用reload.html页面进行重定向

入口地址不变,为:https://域名/路径/reload.html, 重定向的逻辑放在reload.html中,与2相同,需要提供一个返回版本号的后端接口。

reload.html的内容如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="cache-control" content="no-cache">
  <script src="https://aaa.bbb.com:10/webapps/libs/jmoa-1.0.0.js"></script>
</head>
<body>
  <script>
    function createXHR() {
      if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
      } else if (typeof ActiveXObject !== 'undefined') {
        // 支持IE7之前的版本
        if (typeof arguments.callee.activeXString !== 'string') {
          var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
          for (var i = 0; i < versions.length; i++) {
            try {
              new ActiveXObject(versions[i]);
              arguments.callee.activeXString = versions[i];
              break;
            } catch (e) {}
          }
        }
        return new ActiveXObject(arguments.callee.activeXString);
      } else {
        throw new Error("No XHR Object available!");
      }
    }
    // type 请求方式, URL 请求地址, dataObj {} 请求入参, callback 成功后回调, async 是否异步。
    function ajax(type, url, dataObj, callback, async, config, addURL) {
      type = type || 'get';
      type = type.toLowerCase();
      async = async ||true;
      var xhr = createXHR();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          var status = xhr.status;
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            callback && callback(xhr.responseText);
          } else {
            console.log("请求异常!状态码:" + xhr.status);
          }
        }
      };
      xhr.open(type, url, async); // open()方法启动一个请求以备发送
      if (config) {
        for (k in config) {
          xhr.setRequestHeader(k, config[k]);
        }
      };
      if (type == 'get') {
        xhr.send(null);
      } else {
        if (!config || (config && !config['content-type'])) {
          xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8');
        }
        xhr.send(JSON.stringify(dataObj));
      }
    }
    moa.ready(function () {
      ajax('get', '/aaa/bbb/ccc/ddd', null, function (result) {
        var res = JSON.parse(result)
        if (res.flag && res.data) {
          var url = ""
          let {
            origin,
            pathname,
            hash
          } = window.location
          url = `${origin}${pathname.replace('reload.html', '')}${res.data.replace('v', '')}/index.html${hash}`
          // alert('url >>' + url)
          window.location.replace(url)
        } else {
          // alert('res >>>>' + res)
        }
      })
    })
  </script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值