es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

URL base con aplicaciones de múltiples páginas usando Vite.

18 Jun, 2023 Programación

Para mi aplicación multipágina, no puedo tener importaciones de activos HTML que apunten a la raíz ya que necesito cargar mi proyecto dentro de una subcarpeta.

Usando –

“`module.exports = defineConfig({
base: "./",
});

<pre><code><br />se resuelve este problema para las páginas raíz pero causa una importación incorrecta para las páginas anidadas.

Ejemplo:

</code></pre>

<ul>
<li>assets</li>
<li>index.html</li>
<li>nested

<ul>
<li>nested.html
“`

Las importaciones para index.html apuntarán a ./assets, lo cual es correcto.

Las importaciones para nested.html también apuntarán a ./assets, lo cual es incorrecto. Deberían apuntar a ../assets en su lugar.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para abordar este problema, se puede utilizar la función resolve.alias de RollupJS para especificar las rutas correctas para las páginas anidadas. Aquí hay una configuración de ejemplo que se puede utilizar:

    module.exports = defineConfig({
  base: "./",
  resolve: {
    alias: {
      "@root": "./",
      "@nested": "../"
    }
  }
});

    Con esta configuración, se pueden utilizar los alias @root y @nested para importar activos en tus páginas HTML. Por ejemplo, en index.html, se puede utilizar:

    <img src="@root/assets/logo.png">

    Y en nested.html, se puede utilizar:

    <img src="@nested/assets/icon.png">

    De esta manera, las importaciones de activos apuntarán correctamente a la carpeta raíz para las páginas de nivel superior y a la carpeta principal para las páginas anidadas.

Comments are closed.