ソースコード: https://github.com/mochamadboval/multipage-vite-vanilla-js

主な構成

Vite Vanilla JavaScript プロジェクトを作成します。

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 run dev を実行できません。したがって、vite.config.js ファイルを作成し、新しい root パスを src フォルダーに設定します。これは、npm run dev および npm run build コマンドが実行される場合にのみ適用されます。

// vite.config.js

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

以下のように調整し、CSSインポート方法を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 フォルダー内に dist フォルダーが作成されます。そのフォルダーから移動するには、次の構成を追加します。

// vite.config.js

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

root: "./src" は影響しないため、dist フォルダーを実行するために npm runreview コマンドを引き続き使用できます (メイン プロジェクト フォルダーを指しているままです)。

次に、srcフォルダーにabout.html、blogフォルダーにarticle.htmlを作成しましょう。

  
    
    
    
    
    
  
  
    

      
About page.
    
  

  
    
    
    
    
    
  
  
    

      
Article page.
    
  

次に、両方のファイルが 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",
      },
    },
  },
};

これで、プロジェクトは正常に複数ページになりました。

ただし、新しい HTML ファイルを作成するたびに、入力に新しいパスを追加する必要があることに気づいたかもしれません。これを動的に動作させたい場合は、glob パッケージをインストールし、次の構成を追加しましょう。

npm install -D glob

// vite.config.js

import { sync } from "glob";

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

改善および追加できる点:

「404が見つかりません」ページ

URLを間違えるとメインページが表示されてしまいます。デフォルトの「見つかりません」ページを表示させることができます。

// vite.config.js

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

プロジェクトを Netlify にデプロイすると、デフォルトの「見つかりません」ページを独自の 404 ページに簡単にリダイレクトできます。

src フォルダーに 404.html を作成し、パブリック フォルダーに _redirects ファイル (拡張子なし) を作成します。

  
    
    
    
    
    
  
  
    

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

テキスト エディター (VS Code) で自動提案を有効にするには、jsconfig.json ファイルを作成し、この構成を追加します。

// jsconfig.json

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

TailwindCSS をインストールする

公式ドキュメントに従ってください。

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

Prettier の使用時に TailwindCSS クラスを自動的に並べ替えるには、このドキュメントに従ってください。

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