uni-app开发H5应用时，微信授权回调地址中有#号的问题

刚换工作，上司安排我做企业微信应用。第一次用uni-app 开发H5应用，也算第一次真正使用vue.js，有些压力。看了一些官方的教程，一周时间大概上手了。

不断有新的问题，有的百度一下就能解决。但这个困扰我很久，因为Vue的默认的地址为hash模式，地址中都是有#的，传给微信的回调地址会把#号后面的内容都截断，导致回调失败。

目前系统用的是Nginx代理的，配置如下：

 location /mobile {
                                 proxy_set_header Host  $host;
                                 proxy_pass http://127.0.0.1:8088;  
        }

网上搜索的方法主要有以下3种：

1. 设置一个页面中转。但目前系统前端全是用vue.js，所有地址都有#号，所以不适合。
2. 改为history模式，按网上配置了nginx，还是不行，很多地址访问都502错误。
3. 使用nginx的地址重写，也捣鼓了半天，不生效。

第2，3种方法都要改动nginx，而我又不是很熟悉，抄了网上的配置也不行。试用期又不能浪费太多的时间，只好另找办法。

发现在模板html页中可以拦截到所以有的地址，包括出错的地址。于是就在模板页中拦截处理特殊的地址，跳转到带#的页面。

template.h5.html文件增加以下代码：

<script type="text/javascript">
            //拦截企业微信信回调页面
            var url=window.location.href;
            if(url.indexOf('/WXLOGINX/')>0 && url.indexOf('code=')>0 ){
                var code=getQueryString('code');
                var newUrl="/mobile/#/pages/login/WxLogin?code=" + code;
                window.location.href=newUrl;
            }
            
            /**
             * 从URL中找到某个参数的值, Elwin ZHANG 2021-4-13
             * @param {Object} param 参数
             */
            function getQueryString(param)
            {
                let query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == param){return pair[1];}
                }
                return null;
            }
        </script>

今天又试了一下第2种方法，改为history模式也可以了，nginx配置改为如下：
跟昨天配置的区别在于try_files后面加了last。

        location  /mobile {
        proxy_set_header Host     $host;
        proxy_pass http://127.0.0.1:8088;
        try_files $uri $uri/ /index.html last;
    }