Saltar al contenido

Problemas con rutas profundas en una aplicación de una sola página en Firebase hosting

Solución:

Escuché de Firebase Hosting. Aparentemente, el archivo bundle.js al que se hace referencia en nuestro archivo de índice necesitaba una barra inclinada delante, para convertirlo en una ruta absoluta. Así que esto:

<script src="https://foroayuda.es/bundle.js"></script>

…en lugar de esto:

<script src="https://foroayuda.es/bundle.js"></script>

En caso de que alguien más cometa este mismo error tonto, espero que esto sea útil.

[tl;dr]

Esta respuesta es solo con fines educativos y un conocimiento profundo del planteamiento del problema y su solución. Para copiar / pegar, consulte esta respuesta proporcionada por @hairbo. Es la versión corta y responde a la pregunta de manera simple y agradable.

Se puede hacer referencia a cada enlace a recursos como imágenes, css, js de 3 formas:

1) Camino absoluto

<script src="http://app-url.com/bundle.js"></script>

Esta es la ruta absoluta y el recurso se cargará desde la ruta especificada sin preprocesar la ruta proporcionada.

2) Camino relativo

<script src="https://foroayuda.es/bundle.js"></script>

Esta es una ruta relativa y se refiere al archivo de recursos como si estuviera ubicado en el directorio de trabajo actual. Ahí es cuando estás en app-url.com/lvl-1 el camino relativo se convierte en app-url.com/bundle.js lo que no proporciona ningún problema porque en realidad es el camino al recurso.

Problema

Pero al ir a otro nivel profundo, es decir app-url.com/lvl-1/lvl-2, el nivel de trabajo actual se convierte en app-url.com/lvl-1/ y la ruta relativa se trata como app-url.com/lvl-1/bundle.js pero ese no es realmente el camino al recurso. Por lo tanto, el archivo index.html se comporta mal porque no puede cargar los archivos requeridos.

3) Ruta relativa de la raíz

<script src="https://foroayuda.es/bundle.js"></script>

Agregar una barra (/) antes de la ruta relativa la convierte en la ruta relativa de raíz. En este caso, todas las rutas no absolutas se tratan como rutas enraizadas en el dominio actual. Es decir, en este caso la ruta al recurso /bundle.js es tratado como app-url.com/bundle.js incluso si el nivel de trabajo actual de la URL es app-url/lvl-1/lvl-2/lvl-3/...

Solución No utilice ~ rutas relativas ~. Utilice rutas absolutas o rutas relativas de raíz en todos los archivos. De esta forma, todos los caminos se tratarán como se esperaba.

Encontré el mismo comportamiento, pero el problema no estaba relacionado con bundle.js.

Mi rewrites Sección de firebase.json se veía así:

    "rewrites": [
      {
        "source": "**",
        "destination": "index.html"
      }
    ]

y resolví el problema usando el ruta relativa de raíz en vez de camino relativo por index.html. (¡Gracias Ashu!)

    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
¡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. Los campos obligatorios están marcados con *