opcion uno
La solución del autor anterior se realizó mediante el cambio de enrutamiento en el proyecto (vue project), pero este método verá una acción de cambio en la página web, y este método tiene la situación de que ambos proyectos están cargados, por lo que aumenta considerablemente el tiempo requerido. para cargar la primera pantalla, y la experiencia del usuario no es buena.
Dirección del artículo: método de conmutación de enrutamiento
Opción II
Luego encontré otro método en Internet, que es crear un nuevo proyecto.No se agrega ningún otro contenido al proyecto, solo se configura el enrutamiento y el tamaño del paquete del proyecto se reduce tanto como sea posible (introducción de cdn, código inútil se elimina), determine el dispositivo del usuario en el enrutamiento y elija saltar a la PC o al terminal móvil.
La idea de este método es que el usuario primero visite el proyecto que solo tiene saltos de enrutamiento y luego salte al proyecto que se muestra según el dispositivo del usuario.
Esta solución resuelve el problema de la carga lenta de la primera pantalla en la solución anterior (pero el tiempo de carga de este método aún es más largo que el de cargar solo un elemento) y no resuelve el problema de la acción de cambio de la solución anterior.
tercera solución
Este método es lo que pensó el autor al configurar el proxy inverso de Nginx (si hay amigos que no conocen el proxy inverso de nginx, haga clic en: proxy inverso de nginx ), se puede hacer agregando una condición de juicio en el proxy inverso La configuración es fácil de entender después de elegir el elemento al que saltar, así que vayamos directamente al código sin más preámbulos:
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;
}
}
Después de leer el código, algunos amigos pueden tener dudas, ¿cómo implementar el proyecto en diferentes puertos del servidor?
Los amigos que tengan esta pregunta pueden leer otro artículo del autor: Múltiples proyectos de Vue se implementan en el mismo Tomcat con diferentes puertos
Si este artículo es útil para usted, puede hacer clic para recopilarlo. Si hay nuevos métodos en el futuro, este artículo se actualizará.
Al mismo tiempo, el autor publicará más artículos sobre el front-end en el futuro, los amigos interesados pueden prestarle atención.
