Multipage Vite Vanilla JavaScript-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Multipage Vite Vanilla JavaScript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 21, 2024 pm 03:50 PM

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

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

Copy after login

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

Copy after login

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>

Copy after login

<!-- ./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>

Copy after login

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

Copy after login

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

Copy after login

// vite.config.js

import { sync } from "glob";

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

Copy after login

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

Copy after login

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>

Copy after login

_redirects

/* /404.html 200

Copy after login

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

Copy after login

// vite.config.js

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

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

Copy after login

Create Path Aliases

// vite.config.js

...
import { resolve } from "path";

export default {
  resolve: {
    alias: {
      "@js": resolve(__dirname, "src/assets/js"),
    },
  },
  plugins: [ViteMinifyPlugin()],
  ...

Copy after login

// ./src/main.js

import { setupCounter } from "@js/counter";

import viteLogo from "/vite.svg";
...

Copy after login

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/*"]
    }
  }
}

Copy after login

Install TailwindCSS

You can follow the official documentation.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Copy after login

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Copy after login

// poscss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Copy after login

/* ./src/style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

root: {
  ...

Copy after login

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

npm install -D prettier prettier-plugin-tailwindcss

Copy after login

// .prettierrc

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

Copy after login

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

The above is the detailed content of Multipage Vite Vanilla JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7707

Java Tutorial

1640

CakePHP Tutorial

1394

Laravel Tutorial

1288

PHP Tutorial

1232

Related knowledge

What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles