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

lgq2016

已于 2022-05-13 08:25:39 修改

阅读量3k

点赞数

文章标签： nginx lua 移动端带版本路径发布

于 2022-03-30 16:55:19 首次发布

本文链接：https://blog.csdn.net/lgq2016/article/details/123850315

版权

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

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>