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

Configuração principal

Crie um projeto Vite Vanilla JavaScript.

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

cd multipage-vite-vanilla-js
npm i

Personalize a estrutura de pastas do projeto da seguinte maneira.

|- 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

Como index.html não está mais na pasta principal do projeto, o npm run dev não pode ser executado. Portanto, crie um arquivo vite.config.js e defina o novo caminho root para a pasta src. Isso se aplica apenas quando os comandos npm run dev e npm run build são executados.

// vite.config.js

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

Faça alguns ajustes conforme a seguir e mova o método de importação CSS para 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"));

Agora podemos executar o comando npm run dev. No entanto, ao executar npm run build a pasta dist será criada na pasta src. Para movê-lo para fora dessa pasta, adicione a seguinte configuração.

// vite.config.js

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

Ainda podemos usar o comando npm run preview para executar a pasta dist porque root: "./src" não a afeta (ainda aponta para a pasta principal do projeto).

A seguir, vamos criar about.html na pasta src e article.html na pasta blog.

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

Em seguida, adicione a seguinte configuração para que ambos os arquivos também sejam criados na pasta 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",
      },
    },
  },
};

Agora o projeto é multipáginas com sucesso.

No entanto, você deve ter notado que precisamos adicionar um novo caminho na entrada toda vez que criamos um novo arquivo HTML. Se você quiser que isso funcione dinamicamente, vamos instalar o pacote glob e adicionar a seguinte configuração.

npm install -D glob

// vite.config.js

import { sync } from "glob";

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

Coisas que podem ser melhoradas e adicionadas:

Página '404 não encontrado'

Quando escrevemos a url errada, a página exibida é a página principal. Podemos fazer com que ele mostre a página padrão 'Não encontrado'.

// vite.config.js

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

Se implantarmos o projeto no Netlify, podemos facilmente redirecionar a página padrão 'Não encontrado' para nossa própria página 404.

Crie 404.html na pasta src e o arquivo _redirects (sem extensão) na pasta pública.

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

Minimizar HTML

Podemos reduzir todos os arquivos HTML durante o processo de construção usando este plugin (deixe-me saber se posso fazer isso sem o plugin).

npm install -D vite-plugin-minify

// vite.config.js

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

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

Criar aliases de caminho

// 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 a sugestão automática no editor de texto (VS Code), crie um arquivo jsconfig.json e adicione esta configuração.

// jsconfig.json

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

Instale o TailwindCSS

Você pode seguir a documentação 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 classificar automaticamente as classes TailwindCSS ao usar o Prettier, você pode seguir esta documentação.

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

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

Espero que ajude você :)

Fonte:

• 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