Saltar al contenido

404 al recargar un sitio web de Vue publicado en páginas de Github

Posteriormente a buscar en diferentes repositorios y sitios webs al concluir nos hemos encontrado la resolución que te compartiremos ahora.

Solución:

Pero cuando navego usando la barra de navegación (christopherkade.com/posts o christopherkade.com/work) y vuelvo a cargar la página 404 Archivo no encontrado

Déjame explicarte por qué 404 File not found se está mostrando

Cuando christopherkade.com/posts se activa desde el navegador web, la máquina a la que pertenece el dominio christopherkade.com se mapea se contacta.

El camino /posts se busca en su servidor. en tu caso, creo que la ruta para /posts no existe en el servidor. Como el resultado 404 is displayed

Hay algunas maneras de arreglar esto

Para evitar que el navegador se comunique con el servidor al activar la solicitud christopherkade.com/postspuedes quedarte mode : 'hash' en la configuración de tu ruta

Cómo mode : 'hash' ¿obras?Esta es una forma de solucionar su problema.

mode : 'hash' hace uso del comportamiento predeterminado del navegador, que es evitar que la solicitud http active los detalles que existen después #

Como resultado, cuando activa christopherkade.com/#/posts , christopherkade.com está siendo activado por el navegador y una vez que se recibe la respuesta, el /posts ruta desde el route config es invocado.

Supongamos que tiene control sobre el servidor y está convencido de que necesita # para ser eliminado de la URL

Entonces, lo que podría hacer es configurar el servidor de tal manera que el servidor responda con la misma página cada vez que se envía cualquier ruta. Una vez que se recibe la respuesta en el navegador, la ruta se iniciará automáticamente.

Incluso en su programa actual, routeConfig se inicia cuando hace clic en cualquier enlace (como trabajo, publicaciones) en su página. Esto se debe a que el comportamiento del navegador no se invoca en este momento.

ingrese la descripción de la imagen aquí

En su caso, usa github para alojar esta aplicación con mode: 'history' Yo mismo tengo que buscar una solución específica para solucionar esto. Actualizaré mi respuesta una vez que la obtenga.

Espero que esto haya sido útil.

Esto realmente sucede ya que su navegador hace una solicitud a christopherkade.com/posts URL que no existe (esta ruta se define en la aplicación Vue que se ejecuta desde index.html).

Si estuviera ejecutando su propio servidor, probablemente lo configuraría para representar su index.html page para cualquier URI de solicitud, por lo que su aplicación Vue se cargaría desde cualquier ruta y manejaría el enrutamiento por sí misma.

Hablando de páginas de GitHub, no puede simplemente configurarlas para que actúen de la misma manera que describí, pero afortunadamente, existe una solución alternativa que usa la página 404 personalizada: https://github.com/rafrex/spa-github-pages

Más adelante puedes encontrar las acotaciones de otros gestores de proyectos, tú asimismo tienes el poder mostrar el tuyo si dominas el tema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada.