다중 페이지 Vite 바닐라 JavaScript-JS 튜토리얼-php.cn

다중 페이지 Vite 바닐라 JavaScript

WBOY

풀어 주다： 2024-07-21 15:50:12

원래의

615명이 탐색했습니다.

Multipage Vite Vanilla JavaScript

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

Main Configuration

Create a Vite Vanilla JavaScript project.

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

cd multipage-vite-vanilla-js
npm i

로그인 후 복사

Customize the project folder structure as follows.

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

로그인 후 복사

Since the index.html is no longer in the main project folder, the npm run dev cannot be executed. Therefore, create a vite.config.js file and set the new root path to the src folder. This only applies when the npm run dev and npm run build commands are executed.

// vite.config.js

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

로그인 후 복사

Make some adjustments as follows and move the CSS import method to 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 = `
  <div>
    ...
    ...
    <a href="/about">About</a> |
    <a href="/blog/article">Article</a>
  </div>
`;

setupCounter(document.querySelector("#counter"));

로그인 후 복사

<!-- ./src/index.html -->

  <title>Vite App</title>
  <link rel="stylesheet" href="/style.css" />
</head>

로그인 후 복사

Now we can execute npm run dev command. However, when running npm run build the dist folder will be created in the src folder. To move it out of that folder add the following configuration.

// vite.config.js

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

로그인 후 복사

We can still use the npm run preview command to run the dist folder because root: "./src" doesn't affect it (it still points to the main project folder).

Next, let's create about.html in the src folder and article.html in the blog folder.

<!-- ./src/about.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About | Multipage Vite Vanilla JavaScript</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div>
      <h1>About page.</h1>
    </div>
  </body>
</html>

로그인 후 복사

<!-- ./src/blog/article.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Article | Multipage Vite Vanilla JavaScript</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div>
      <h1>Article page.</h1>
    </div>
  </body>
</html>

로그인 후 복사

Then, add the following configuration so that both files are also created in the dist folder.

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

로그인 후 복사

Now the project is successfully multipage.

However, you might have noticed that we need to add a new path in input every time we create a new HTML file. If you want this to work dynamically, let's install the glob package and add the following configuration.

npm install -D glob

로그인 후 복사

// vite.config.js

import { sync } from "glob";

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

로그인 후 복사

Things that can be improved and added:

'404 Not Found' page

When we write the wrong url, the page displayed is the main page. We can make it show the default 'Not Found' page.

// vite.config.js

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

로그인 후 복사

If we deploy the project to Netlify, we can easily redirect the default 'Not Found' page to our own 404 page.

Create 404.html in the src folder and _redirects file (without extension) in the public folder.

<!-- ./src/404.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page not found | Multipage Vite Vanilla JavaScript</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div>
      <h1>Page not found.</h1>
    </div>
  </body>
</html>

로그인 후 복사

_redirects

/* /404.html 200

로그인 후 복사

Minify HTML

We can minify all HTML files during the build process using this plugin (let me know if I can do it without the plugin).

npm install -D vite-plugin-minify

로그인 후 복사

// vite.config.js

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

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

로그인 후 복사

Create Path Aliases

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

로그인 후 복사

To enable auto-suggestion in the text editor (VS Code), create a jsconfig.json file and add this configuration.

// jsconfig.json

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

로그인 후 복사

Install TailwindCSS

You can follow the official documentation.

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

로그인 후 복사

To automatically sort TailwindCSS classes when using Prettier, you can follow this documentation.

npm install -D prettier prettier-plugin-tailwindcss

로그인 후 복사

// .prettierrc

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

로그인 후 복사

Hope it helps you :)

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

위 내용은 다중 페이지 Vite 바닐라 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!