स्रोत कोड: https://github.com/mochamadboval/multipage-vite-vanilla-js

मुख्य विन्यास

एक वाइट वेनिला जावास्क्रिप्ट प्रोजेक्ट बनाएं।

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

cd multipage-vite-vanilla-js
npm i

प्रोजेक्ट फ़ोल्डर संरचना को निम्नानुसार अनुकूलित करें।

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

चूंकि Index.html अब मुख्य प्रोजेक्ट फ़ोल्डर में नहीं है, इसलिए npm रन देव निष्पादित नहीं किया जा सकता है। इसलिए, एक vite.config.js फ़ाइल बनाएं और src फ़ोल्डर में नया root पथ सेट करें। यह केवल तभी लागू होता है जब npm run dev और npm run build कमांड निष्पादित होते हैं।

// vite.config.js

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

निम्नानुसार कुछ समायोजन करें और सीएसएस आयात विधि को 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"));

अब हम npm run dev कमांड निष्पादित कर सकते हैं। हालाँकि, npm run build चलाते समय src फ़ोल्डर में डिस्ट फ़ोल्डर बनाया जाएगा। इसे उस फ़ोल्डर से बाहर ले जाने के लिए निम्नलिखित कॉन्फ़िगरेशन जोड़ें।

// vite.config.js

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

डिस्ट फ़ोल्डर को चलाने के लिए हम अभी भी एनपीएम रन प्रीव्यू कमांड का उपयोग कर सकते हैं क्योंकि रूट: "./src" इसे प्रभावित नहीं करता है (यह अभी भी मुख्य प्रोजेक्ट फ़ोल्डर को इंगित करता है)।

इसके बाद, src फ़ोल्डर में about.html और ब्लॉग फ़ोल्डर में artical.html बनाएं।

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

फिर, निम्न कॉन्फ़िगरेशन जोड़ें ताकि दोनों फ़ाइलें भी डिस्टर्ब फ़ोल्डर में बन जाएं।

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

अब प्रोजेक्ट सफलतापूर्वक मल्टीपेज है।

हालाँकि, आपने देखा होगा कि हर बार जब हम एक नई HTML फ़ाइल बनाते हैं तो हमें इनपुट में एक नया पथ जोड़ने की आवश्यकता होती है। यदि आप चाहते हैं कि यह गतिशील रूप से काम करे, तो आइए ग्लोब पैकेज स्थापित करें और निम्नलिखित कॉन्फ़िगरेशन जोड़ें।

npm install -D glob

// vite.config.js

import { sync } from "glob";

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

चीजें जिन्हें सुधारा और जोड़ा जा सकता है:

'404 नहीं मिला' पृष्ठ

जब हम गलत यूआरएल लिखते हैं, तो प्रदर्शित पृष्ठ मुख्य पृष्ठ होता है। हम इसे डिफ़ॉल्ट 'नहीं मिला' पृष्ठ दिखा सकते हैं।

// vite.config.js

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

यदि हम प्रोजेक्ट को नेटलाइज़ पर तैनात करते हैं, तो हम आसानी से डिफ़ॉल्ट 'नॉट फाउंड' पेज को अपने 404 पेज पर रीडायरेक्ट कर सकते हैं।

src फ़ोल्डर में 404.html बनाएं और सार्वजनिक फ़ोल्डर में _रीडायरेक्ट फ़ाइल (एक्सटेंशन के बिना) बनाएं।

  
    
    
    
    
    
  
  
    

      
Page not found.
    
  

_redirects

/* /404.html 200

HTML को छोटा करें

हम इस प्लगइन का उपयोग करके निर्माण प्रक्रिया के दौरान सभी HTML फ़ाइलों को छोटा कर सकते हैं (मुझे बताएं कि क्या मैं इसे प्लगइन के बिना कर सकता हूं)।

npm install -D vite-plugin-minify

// vite.config.js

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

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

पथ उपनाम बनाएं

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

टेक्स्ट एडिटर (वीएस कोड) में ऑटो-सुझाव सक्षम करने के लिए, एक jsconfig.json फ़ाइल बनाएं और इस कॉन्फ़िगरेशन को जोड़ें।

// jsconfig.json

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

टेलविंडसीएसएस स्थापित करें

आप आधिकारिक दस्तावेज़ का अनुसरण कर सकते हैं।

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

प्रीटियर का उपयोग करते समय टेलविंडसीएसएस कक्षाओं को स्वचालित रूप से सॉर्ट करने के लिए, आप इस दस्तावेज़ का पालन कर सकते हैं।

npm install -D prettier prettier-plugin-tailwindcss

// .prettierrc

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

आशा है कि यह आपकी मदद करेगा :)

स्रोत:

• 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