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

Hauptkonfiguration

Erstellen Sie ein Vite Vanilla JavaScript-Projekt.

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

cd multipage-vite-vanilla-js
npm i

Passen Sie die Projektordnerstruktur wie folgt an.

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

Da sich index.html nicht mehr im Hauptprojektordner befindet, kann npm run dev nicht ausgeführt werden. Erstellen Sie daher eine vite.config.js-Datei und legen Sie den neuen root-Pfad auf den src-Ordner fest. Dies gilt nur, wenn die Befehle npm run dev und npm run build ausgeführt werden.

// vite.config.js

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

Nehmen Sie einige Anpassungen wie folgt vor und verschieben Sie die CSS-Importmethode auf 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"));

Jetzt können wir den Befehl npm run dev ausführen. Wenn Sie jedoch npm run build ausführen, wird der Ordner dist im Ordner src erstellt. Um es aus diesem Ordner zu verschieben, fügen Sie die folgende Konfiguration hinzu.

// vite.config.js

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

Wir können weiterhin den Befehl „npm run Preview“ verwenden, um den Ordner „dist“ auszuführen, da root: „./src“ keine Auswirkungen darauf hat (er verweist immer noch auf den Hauptprojektordner).

Als nächstes erstellen wir „about.html“ im Ordner „src“ und „article.html“ im Ordner „Blog“.

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

Dann fügen Sie die folgende Konfiguration hinzu, damit beide Dateien auch im dist-Ordner erstellt werden.

// 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",
      },
    },
  },
};

Jetzt ist das Projekt erfolgreich mehrseitig.

Sie haben jedoch vielleicht bemerkt, dass wir jedes Mal, wenn wir eine neue HTML-Datei erstellen, einen neuen Pfad in der Eingabe hinzufügen müssen. Wenn Sie möchten, dass dies dynamisch funktioniert, installieren wir das Glob-Paket und fügen die folgende Konfiguration hinzu.

npm install -D glob

// vite.config.js

import { sync } from "glob";

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

Dinge, die verbessert und hinzugefügt werden können:

Seite „404 nicht gefunden“.

Wenn wir die falsche URL schreiben, ist die angezeigte Seite die Hauptseite. Wir können dafür sorgen, dass die Standardseite „Nicht gefunden“ angezeigt wird.

// vite.config.js

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

Wenn wir das Projekt auf Netlify bereitstellen, können wir die Standardseite „Nicht gefunden“ problemlos auf unsere eigene 404-Seite umleiten.

Erstellen Sie 404.html im src-Ordner und die Datei _redirects (ohne Erweiterung) im öffentlichen Ordner.

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

HTML minimieren

Mit diesem Plugin können wir alle HTML-Dateien während des Erstellungsprozesses minimieren (lassen Sie mich wissen, ob ich es ohne das Plugin schaffen kann).

npm install -D vite-plugin-minify

// vite.config.js

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

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

Erstellen Sie Pfadaliase

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

Um automatische Vorschläge im Texteditor (VS-Code) zu aktivieren, erstellen Sie eine jsconfig.json-Datei und fügen Sie diese Konfiguration hinzu.

// jsconfig.json

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

Installieren Sie TailwindCSS

Sie können der offiziellen Dokumentation folgen.

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

Um TailwindCSS-Klassen bei Verwendung von Prettier automatisch zu sortieren, können Sie dieser Dokumentation folgen.

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

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

Ich hoffe, es hilft dir :)

Quelle:

• 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