URL base con aplicaciones de múltiples páginas usando Vite.
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.
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:Con esta configuración, se pueden utilizar los alias
@root
y@nested
para importar activos en tus páginas HTML. Por ejemplo, enindex.html
, se puede utilizar:Y en
nested.html
, se puede utilizar: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.