소스 코드: https://github.com/mochamadboval/multipage-vite-vanilla-js

주요 구성

Vite 바닐라 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 파일을 생성하고 src 폴더에 새로운 root 경로를 설정하세요. 이는 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"는 영향을 주지 않기 때문에 npm run Preview 명령을 사용하여 dist 폴더를 실행할 수 있습니다(여전히 기본 프로젝트 폴더를 가리킵니다).

다음으로 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을 만들고 public 폴더에 _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