源代码：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.<a style="color:#f60; text-decoration:underline;" href="https://www.codesou.cn/" target="_blank">css</a>
|- .<a style="color:#f60; text-decoration:underline;" href="https://www.codesou.cn/" target="_blank">git</a>ignore
|- 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">
现在我们可以执行 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 --> <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>
然后，添加以下配置，以便在 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 页面。
立即学习“Java免费学习笔记（深入）”；
在src文件夹中创建404.html，在public文件夹中创建_redirects文件（不带扩展名）。
<!-- ./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
缩小 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
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 多页 Vite Vanilla JavaScript
