Nginx中判断用户的设备来选择切换成PC端还是移动端

方案一

之前笔者的解决方案是在项目（vue项目）中通过路由切换来实现的，但是这种做法会在网页中看到一个切换的动作，并且这种方法存在两个项目都加载的情况，这样就大大的增加了首屏加载所需要的时间，用户体验感不好。

文章地址：路由切换方法

方案二

之后在网上找到了另一种方法，就是再新建一个项目，项目中不添加其他内容，就只配置路由，并且尽可能减小该项目包的大小（cdn引入，删掉没用的代码），在路由里面判断用户设备然后选择跳转到pc端还是移动端。

这种方法的思路是用户先访问这个只有路由跳转的项目，然后再跳转到根据用户设备所展示的项目上。

这种方案解决了上面方案所存在的首屏加载慢的问题（但是相比于只加载一个项目这种方法的加载时间还是会要长一点的），并且没有解决上一种方案的切换动作问题。

方案三

这种方法是笔者在配置Nginx反向代理的时候想到的（如果有对nginx反向代理不了解的小伙伴请点击：nginx反向代理），通过在反向代理配置中添加一个判断条件就可以选择要跳转的项目了，也很容易理解，话不多说直接上代码：

http      
{
    
    
	...
	server
	{
    
    
	    #表示监听 www.aaa.com:80
        listen       80; 
        server_name  www.aaa.com;
        #判断是否为移动端设备
		if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
    
     
				#如果是移动端的话就跳转到 http://www.aaa.com:6068 地址的项目上
                proxy_pass http://www.aaa.com:6068;
            }
        	#如果是移动端的话就跳转到 http://www.aaa.com:6069 地址的项目上
            proxy_pass http://www.aaa.com:6069;
 	}
}

看完代码后可能有的小伙伴会有疑问了，如何将项目部署到服务器不同的端口上呢？
有这个疑问的小伙伴可以看笔者的另一篇文章：多个vue项目以不同的端口部署到同一个Tomcat中

如果本文对你有帮助的话可以点击收藏哦，日后如果有新的方法还会在本篇文章进行更新。
同时笔者日后会发布更多关于前端的文章，有兴趣的小伙伴可以关注一下哦。