Option One
The author's solution before was realized through routing switching in the project (vue project), but this method will see a switching action in the web page, and this method has the situation that both projects are loaded, so that It greatly increases the time required to load the first screen, and the user experience is not good.
Article address: Routing switching method
Option II
Then I found another method on the Internet, which is to create a new project . No other content is added to the project, only routing is configured , and the size of the project package is reduced as much as possible (cdn introduction, useless code is deleted), Determine the user device in the routing and choose to jump to the PC or the mobile terminal.
The idea of this method is that the user first visits the project that only has routing jumps, and then jumps to the project displayed according to the user's device.
This solution solves the problem of slow loading of the first screen in the above solution (but the loading time of this method is still longer than that of loading only one item), and does not solve the switching action problem of the previous solution .
third solution
This method is what the author thought of when configuring the Nginx reverse proxy (if there are friends who don’t know about nginx reverse proxy, please click: nginx reverse proxy ), it can be done by adding a judgment condition in the reverse proxy configuration It is easy to understand after choosing the item to jump to, so let’s go directly to the code without further ado:
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;
}
}
After reading the code, some friends may have doubts, how to deploy the project to different ports of the server?
Friends who have this question can read another article of the author: Multiple Vue projects are deployed to the same Tomcat with different ports
If this article is helpful to you, you can click to collect it. If there are new methods in the future, this article will be updated.
At the same time, the author will publish more articles about the front end in the future, interested friends can pay attention to it.
