前端：同一URL 根据设备加载不同页面

前言

因为历史的原因，公司内部有一个系统针对手机端和电脑端分别做了一套前端的spa页面，但是业务方还是希望通过不同设备访问同一个地址的时候，手机端加载手机端的页面，电脑端就去加载电脑端的页面 该如何实现这该死的需求呢？

方案

问题拆解

问：定心想一下，要实现这个需求我们需要解决的最根本的问题是什么呢？
答：根本要解决的问题是区分不同的设备，对相同的URL地址，返回对应设备的入口html文件。
问：那该如何区分不同设备呢?
答：我们可以在nginx中，根据请求头中的ua区分是移动端设备还是电脑端设备。
问：那具体该怎么配置呢?

具体配置

server {
    listen 9999;

    root /www/data/source;

    # 默认入口是pc
    set $index_file /index-pc.html; 
    if ($http_user_agent ~* "(android|iphone|ipad|ipod|mobile)") {
         # 手机端入口
         set $index_file /index-mobile.html; 
    }

    if ($arg_isMobile != "") {
        # 特殊需要 如果路径上带isMobile也加载手机端入口页面
        set $index_file /index-mobile.html; 
    }


   location / {
       # 顺序匹配 默认匹配路径  否则返回pc或mobile入口html
       try_files $uri $index_file;
    }
}

效果

电脑端访问localhost:9999 手机端访问localhost:9999 电脑端访问localhost:9999?isMobile=1

解决

通过ua的判断，针对相同的请求URL加载对应设备的入口html文件。

注意点

这个解决方案有一个要求是两个端构建后的资源需要上传到同一个目录下面，并且要修改入口html名称区分不同端的入口。担心静态资源(js,css,img)混乱的话，可以在构建的时候,把静态资源也用目录区分开，比如电脑端静态资源构建到pc目录下，手机端的资源构建到mobile目录下。

结语

没有最好的方案，只有最适合业务需求的方案。