zhanghaoran
文章 文章详情

我是怎么通过请求ua转发不同端页面的

阅读:82 分类:nuxt.js 发布时间:2020-06-05

前言

在web项目中,经常会有移动端和电脑端两套系统页面,甚至更多,那我们怎么正确的向用户提供适配的页面,以达到最佳展示效果呢?

现在,我这边有:移动端(mobile),电脑端(front) 两套前端页面系统。

移动端地址: http://m.zhanghaoran.ren;

电脑端地址:http://www.zhanghaoran.ren;

两种方式原理为:通过判断请求ua,来重定向到对应的url


1. nginx判断请求ua,转发不同端页面(普遍适用)

​ 在电脑端端nginx配置:

server{
    listen 80;
    server_name www.zhanghaoran.ren;

    location / {
        # 判断请求ua 是否为移动端,如果是 重定向到移动端url
        if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
        rewrite  ^(.*)    http://m.zhanghaoran.ren$1 permanent;
    }
    # 正常情况下,继续访问电脑端url
    proxy_pass                          http://127.0.0.1:8007;
    }
}

在移动端nginx配置:

server{
    listen 80;
    server_name m.zhanghaoran.ren;

    location / {
        # 判断请求ua 不是电脑端,如果是 重定向到电脑端url
        if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
        rewrite  ^(.*)    https://www.zhanghaoran.ren$1 permanent;
    }

    # 正常情况下,继续访问移动端url
    proxy_pass                          http://127.0.0.1:8008;
    }
}

2. Nuxt.js中利用中间件重定向不同端页面(仅适用于nuxt.js项目,其它项目同理)

  • ~/middleeare/ 文件夹下创建uaRed.js文件
    // 判断当前请求是不是移动端
    function isMoible(UA) {
        return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA) ? true : false;
    }

     // 定义需要重定向的页面名称
    const pageList = ['index', 'follow', 'question-questionID', 'question-questionID-answer-huidaID', 'article-p-id', 'question-waiting',
        'people-name-answers', 'people-name-asks', 'people-name-collections', 'people-name-posts', 'collections-slug-id', 'sign', 'register', 'search', 'topic-id-hot'];

    export default function ({route, redirect, req}) {
            // 获取请求ua
        let userAgent = req ? req.headers['user-agent'] : navigator.userAgent || '';
        // 获取请求host
        let host =   req ? req.headers.host : '';
        // 如果是移动端请求 并且 请求host不是移动端的host 并且当前请求页面在上面定义的页面列表中。就重定向到移动端对应的页面
        if(isMoible(userAgent) && host != MobileHost().replace('http://', '')  && pageList.indexOf(route.name) > -1){
            // 手机端
            redirect (MobileHost()+route.fullPath)
        }
        / 如果是电脑端请求 并且 请求host不是电脑端的host 并且当前请求页面在上面定义的页面列表中。就重定向到电脑端对应的页面
        if(!isMoible(userAgent) && host !=  currentHost().replace('http://', '')  && pageList.indexOf(route.name) > -1){
            // pc端
            redirect (currentHost()+route.fullPath)
        }
    }
  • 把刚才创建的中间件加入到nuxt.config.js
router: {middleware: 'uaRed'},
  • 完成✅!