Código fuente: https://github.com/mochamadboval/multipage-vite-vanilla-js

Configuración principal

Crear un proyecto Vite Vanilla JavaScript.

npm create vite@latest multipage-vite-vanilla-js -- --template vanilla

cd multipage-vite-vanilla-js
npm i

Personalice la estructura de carpetas del proyecto de la siguiente manera.

|- node_modules/
|- src/
   |- assets/
      |- img/
         |- javascript.svg
      |- js/
         |- counter.js
   |- public/
      |- vite.svg
   |- index.html
   |- main.js
   |- style.css
|- .gitignore
|- package-lock.json
|- package.json

Dado que index.html ya no está en la carpeta principal del proyecto, npm run dev no se puede ejecutar. Por lo tanto, cree un archivo vite.config.js y establezca la nueva ruta raíz a la carpeta src. Esto solo se aplica cuando se ejecutan los comandos npm run dev y npm run build.

// vite.config.js

export default {
  root: "./src",
};

Realice algunos ajustes de la siguiente manera y mueva el método de importación de CSS a HTML.

// ./src/main.js

import { setupCounter } from "./assets/js/counter";

import viteLogo from "/vite.svg";
import javascriptLogo from "./assets/img/javascript.svg";

document.querySelector("#app").innerHTML = `
  

    ...
    ...
    About |
    Article
  
`;

setupCounter(document.querySelector("#counter"));

Ahora podemos ejecutar el comando npm run dev. Sin embargo, al ejecutar npm run build, la carpeta dist se creará en la carpeta src. Para sacarlo de esa carpeta, agregue la siguiente configuración.

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
  },
};

Aún podemos usar el comando npm run preview para ejecutar la carpeta dist porque root: "./src" no la afecta (aún apunta a la carpeta principal del proyecto).

A continuación, creemos about.html en la carpeta src y Article.html en la carpeta del blog.

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

Luego, agrega la siguiente configuración para que ambos archivos también se creen en la carpeta dist.

// vite.config.js

export default {
  root: "./src",
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    rollupOptions: {
      input: {
        index: "./src/index.html",
        about: "./src/about.html",
        article: "./src/blog/article.html",
      },
    },
  },
};

Ahora el proyecto tiene varias páginas exitosamente.

Sin embargo, es posible que hayas notado que necesitamos agregar una nueva ruta en la entrada cada vez que creamos un nuevo archivo HTML. Si desea que esto funcione dinámicamente, instalemos el paquete glob y agreguemos la siguiente configuración.

npm install -D glob

// vite.config.js

import { sync } from "glob";

export default {
  ...
  build: {
    ...
    rollupOptions: {
      input: sync("./src/**/*.html".replace(/\\/g, "/")),
    },
  },
};

Cosas que se pueden mejorar y agregar:

Página '404 no encontrado'

Cuando escribimos la URL incorrecta, la página que se muestra es la página principal. Podemos hacer que muestre la página predeterminada "No encontrado".

// vite.config.js

export default {
  appType: "mpa",
  root: "./src",
  ...

Si implementamos el proyecto en Netlify, podemos redirigir fácilmente la página predeterminada "No encontrado" a nuestra propia página 404.

Cree 404.html en la carpeta src y el archivo _redirects (sin extensión) en la carpeta pública.

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

Minimizar HTML

Podemos minimizar todos los archivos HTML durante el proceso de compilación usando este complemento (avíseme si puedo hacerlo sin el complemento).

npm install -D vite-plugin-minify

// vite.config.js

...
import { ViteMinifyPlugin } from "vite-plugin-minify";

export default {
  plugins: [ViteMinifyPlugin()],
  appType: "mpa",
  ...

Crear alias de ruta

// vite.config.js

...
import { resolve } from "path";

export default {
  resolve: {
    alias: {
      "@js": resolve(__dirname, "src/assets/js"),
    },
  },
  plugins: [ViteMinifyPlugin()],
  ...

// ./src/main.js

import { setupCounter } from "@js/counter";

import viteLogo from "/vite.svg";
...

Para habilitar la sugerencia automática en el editor de texto (Código VS), cree un archivo jsconfig.json y agregue esta configuración.

// jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@js/*": ["./src/assets/js/*"]
    }
  }
}

Instalar TailwindCSS

Puedes seguir la documentación oficial.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

// poscss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

/* ./src/style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

root: {
  ...

Para ordenar automáticamente las clases de TailwindCSS cuando usas Prettier, puedes seguir esta documentación.

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Espero que te ayude :)

Fuente:

• https://vitejs.dev/guide/#scaffolding-your-first-vite-project
• https://vitejs.dev/guide/build.html#multi-page-app
• https://stackoverflow.com/a/66877705
• https://github.com/isaacs/node-glob
• https://www.npmjs.com/package/vite-plugin-minify