多页 Vite Vanilla JavaScript

npm create vite@latest multipage-vite-vanilla-js -- --template vanillacd multipage-vite-vanilla-jsnpm 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

// vite.config.jsexport default {  root: "./src",};

// ./src/main.jsimport { 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">

// vite.config.jsexport default {  root: "./src",  build: {    outdir: "../dist",    emptyoutdir: true,  },};

<!-- ./src/about.html -->      <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">        <div>      <h1>about page.</h1>    </div>  

<!-- ./src/blog/article.html -->      <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">        <div>      <h1>article page.</h1>    </div>  

// vite.config.jsexport default {  root: "./src",  build: {    outdir: "../dist",    emptyoutdir: true,    rollupoptions: {      input: {        index: "./src/index.html",        about: "./src/about.html",        article: "./src/blog/article.html",      },    },  },};

npm install -d glob

// vite.config.jsimport { sync } from "glob";export default {  ...  build: {    ...    rollupoptions: {      input: sync("./src/**/*.html".replace(/\\/g, "/")),    },  },};

// vite.config.jsexport default {  apptype: "mpa",  root: "./src",  ...

<!-- ./src/404.html -->      <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">        <div>      <h1>page not found.</h1>    </div>  

_redirects/* /404.html 200

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.jsimport { setupcounter } from "@js/counter";import vitelogo from "/vite.svg";...

// jsconfig.json{  "compileroptions": {    "paths": {      "@js/*": ["./src/assets/js/*"]    }  }}

npm install -d tailwindcss postcss autoprefixernpx tailwindcss init

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

// poscss.config.jsexport 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"]}