源代码：https://github.com/mochamadboval/multipage-vite-vanilla-js
主要配置
创建一个 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
由于主项目文件夹中不再有index.html，因此无法执行npm run dev。因此，创建一个 vite.config.js 文件并将新的 root 路径设置为 src 文件夹。这只适用于执行 npm run dev 和 npm run build 命令时。
// vite.config.jsexport default { root: "./src",};
进行如下调整，将css导入方式移至html。
// ./src/main.jsimport { setupcounter } from "./assets/js/counter";import vitelogo from "/vite.svg";import javascriptlogo from "./assets/img/javascript.svg";document.queryselector("#app").innerhtml = ` `;setupcounter(document.queryselector("#counter"));
vite app
现在我们可以执行 npm run dev 命令了。但是，当运行 npm run build 时，将在 src 文件夹中创建 dist 文件夹。要将其移出该文件夹，请添加以下配置。
// vite.config.jsexport default { root: "./src", build: { outdir: "../dist", emptyoutdir: true, },};
我们仍然可以使用 npm run preview 命令来运行 dist 文件夹，因为 root: “./src” 不会影响它（它仍然指向主项目文件夹）。
接下来，我们在src文件夹中创建about.html，在blog文件夹中创建article.html。
about | multipage vite vanilla javascript about page.
article | multipage vite vanilla javascript article page.
然后，添加以下配置，以便在 dist 文件夹中也创建这两个文件。
// 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", }, }, },};
现在项目已经成功多页了。
但是，您可能已经注意到，每次创建新的 html 文件时，我们都需要在输入中添加新路径。如果您希望它动态工作，让我们安装 glob 包并添加以下配置。
npm install -d glob
// vite.config.jsimport { sync } from "glob";export default { ... build: { ... rollupoptions: { input: sync("./src/**/*.html".replace(//g, "/")), }, },};
可以改进和补充的地方：
喵记多
喵记多 – 自带助理的 AI 笔记
27 查看详情 
“404 未找到”页面
当我们写错url时，显示的页面就是主页面。我们可以让它显示默认的“未找到”页面。
// vite.config.jsexport default { apptype: "mpa", root: "./src", ...
如果我们将项目部署到 netlify，我们可以轻松地将默认的“not found”页面重定向到我们自己的 404 页面。
立即学习“Java免费学习笔记（深入）”；
在src文件夹中创建404.html，在public文件夹中创建_redirects文件（不带扩展名）。
page not found | multipage vite vanilla javascript page not found.
_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.jsimport { 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 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: { ...
要在使用 prettier 时自动对 tailwindcss 类进行排序，可以按照此文档进行操作。
npm install -d prettier prettier-plugin-tailwindcss
// .prettierrc{ "plugins": ["prettier-plugin-tailwindcss"]}
希望对你有帮助:)
来源：
https://vitejs.dev/guide/#scaffolding-your-first-vite-projecthttps://vitejs.dev/guide/build.html#multi-page-apphttps://stackoverflow.com/a/66877705https://github.com/isaacs/node-globhttps://www.npmjs.com/package/vite-plugin-minify
以上就是多页 Vite Vanilla JavaScript的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/468769.html
微信扫一扫 
支付宝扫一扫 
