Code source : https://github.com/mochamadboval/multipage-vite-vanilla-js

Configuration principale

Créez un projet JavaScript Vite Vanilla.

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

cd multipage-vite-vanilla-js
npm i

Personnalisez la structure des dossiers du projet comme suit.

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

Étant donné que le fichier index.html n'est plus dans le dossier principal du projet, le développement npm run ne peut pas être exécuté. Par conséquent, créez un fichier vite.config.js et définissez le nouveau chemin root sur le dossier src. Cela s'applique uniquement lorsque les commandes npm run dev et npm run build sont exécutées.

// vite.config.js

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

Apportez quelques ajustements comme suit et déplacez la méthode d'importation CSS vers 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"));

Nous pouvons maintenant exécuter la commande npm run dev. Cependant, lors de l'exécution de npm run build, le dossier dist sera créé dans le dossier src. Pour le déplacer hors de ce dossier, ajoutez la configuration suivante.

// vite.config.js

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

Nous pouvons toujours utiliser la commande npm run preview pour exécuter le dossier dist car root : "./src" ne l'affecte pas (il pointe toujours vers le dossier principal du projet).

Ensuite, créons about.html dans le dossier src et article.html dans le dossier blog.

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

Ensuite, ajoutez la configuration suivante afin que les deux fichiers soient également créés dans le dossier 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",
      },
    },
  },
};

Le projet est désormais multipage avec succès.

Cependant, vous avez peut-être remarqué que nous devons ajouter un nouveau chemin en entrée chaque fois que nous créons un nouveau fichier HTML. Si vous souhaitez que cela fonctionne de manière dynamique, installons le package glob et ajoutons la configuration suivante.

npm install -D glob

// vite.config.js

import { sync } from "glob";

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

Choses qui peuvent être améliorées et ajoutées :

Page « 404 non trouvé »

Lorsque nous écrivons une mauvaise url, la page affichée est la page principale. Nous pouvons lui faire afficher la page par défaut « Introuvable ».

// vite.config.js

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

Si nous déployons le projet sur Netlify, nous pouvons facilement rediriger la page par défaut « Introuvable » vers notre propre page 404.

Créez 404.html dans le dossier src et le fichier _redirects (sans extension) dans le dossier public.

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

Réduire le HTML

Nous pouvons réduire tous les fichiers HTML pendant le processus de construction à l'aide de ce plugin (faites-moi savoir si je peux le faire sans le plugin).

npm install -D vite-plugin-minify

// vite.config.js

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

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

Créer des alias de chemin

// 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";
...

Pour activer la suggestion automatique dans l'éditeur de texte (VS Code), créez un fichier jsconfig.json et ajoutez cette configuration.

// jsconfig.json

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

Installer TailwindCSS

Vous pouvez suivre la documentation officielle.

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: {
  ...

Pour trier automatiquement les classes TailwindCSS lors de l'utilisation de Prettier, vous pouvez suivre cette documentation.

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

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

J'espère que cela vous aidera :)

Source:

• 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