当前位置：首页 > 文章列表 > 文章 > 前端 > 多页 Vite Vanilla JavaScript

多页 Vite Vanilla JavaScript

来源：dev.to 2024-07-21 08:18:47 0浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

学习文章要努力，但是不要急！今天的这篇文章《多页 Vite Vanilla JavaScript》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

多页 Vite Vanilla JavaScript

源代码：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 = `
  <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>

现在我们可以执行 npm run dev 命令了。但是，当运行 npm run build 时，将在 src 文件夹中创建 dist 文件夹。要将其移出该文件夹，请添加以下配置。

// vite.config.js

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

我们仍然可以使用 npm run preview 命令来运行 dist 文件夹，因为 root: "./src" 不会影响它（它仍然指向主项目文件夹）。

接下来，我们在src文件夹中创建about.html，在blog文件夹中创建article.html。

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

然后，添加以下配置，以便在 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，我们可以轻松地将默认的“not found”页面重定向到我们自己的 404 页面。

在src文件夹中创建404.html，在public文件夹中创建_redirects文件（不带扩展名）。

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

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

理论要掌握，实操不能落！以上关于《多页 Vite Vanilla JavaScript》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除

从 WordPress 到领导力的故事：软件工程师的旅程

上一篇: 从 WordPress 到领导力的故事：软件工程师的旅程

下一篇: Cypress 自动化可访问性测试：综合指南

查看更多