2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！

编辑：rootadmin

2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！ 🌻 前言

推荐整理分享2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

本文教程 github地址、码云。如果对你有帮助，希望能点个star ⭐️⭐️⭐️ 万分感谢😊😊😊

🧱 背景

不久前我司需要重新部署一个前端项目，由我来负责这个项目的搭建。因为这个项目是需要和app混合开发的h5页面，包括以后可能会做一些运营h5，所以自然不能采用常规的SPA单页面应用架构（因为大部分页面耦合度低，全都塞一个项目里的话，即使打开个纯静态页都要跑起来整个项目，严重影响页面的加载速度）.

另外，我们其实已经有混合开发h5项目，采用的gulp工作流，即每个页面都是单独的一个html文件。这种架构的优势很明显，就是体量小，结构清晰等，但是它的缺点也非常明显，例如有些轮子无法使用，组件化、模块化开发非常不便影响开发效率等。

目前此项目已在平稳运行，最近有空闲时间记录一下我搭建项目的过程，同时也希望能帮助到有这方面需求的掘友😊

💡 思路 **

综合考虑，我决定用vite + vue3 + ts + esint + prettier + stylelint + husky + lint-stage + commitlint 搭建一套多页面项目。

1. 初步定了几个目标：

🍀 支持打包指定子页面，打包后的文件夹：各页面相互独立（各子页面解耦，避免相互影响）🍀 支持启动指定子页面（常规的多页面项目，启动后需要手动拼接页面地址，或者在根目录做一个重定向的页面，总之调试非常不便）🍀 支持指令化新建页面（手动创建页面太麻烦，每次都得复制一份干净的文件夹）🍀 自由选择创建ts页面 / js页面（对于一些重要的页面可以使用ts提高规范性，一些简单的页面则使用js提高开发效率）

2. 本文将从以下几个方面逐步讲解：

项目目录结构新建项目安装依赖及一些基础插件vite配置项修改ts配置多页面入口配置多页面打包配置指令化新建子页面（*重点）多页面架构改造（*重点）完善项目架构🌈 教程一、项目目录结构├── README.md├── .husky //git hook钩子│ ├── commit-msg //规范 commit message 信息│ └── verify-commit-msg.mjs //脚本：commitlint 替代方案├── dist //打包输出目录├── scripts //存放一些脚本│ ├── template //创建子页面的js模版│ ├── template-ts //创建子页面的ts模版│ ├── index.mjs //创建子页面的脚本│ └── multiPages.json //子页面描述说明集合文件├── src │ ├── arrets //公共静态资源│ ├── components //公共组件│ ├── store //pinia 共享状态存储库│ ├── utils //公共方法│ └── Projects //多页面文件夹├── types //ts

本文链接地址:https://www.jiuchutong.com/zhishi/292405.html 转载请保留说明！

上一篇：日落时分正在迁徙的斑纹角马群，肯尼亚马赛马拉野生动物保护区 (© Denis-Huot/Minden Pictures)(日落之前是什么时辰)

下一篇：VScode 调试教程 tasks.json和launch.json的设置（超详细）(vscode调试在哪)