全球化 H5 前端架构实践：基于 Vue 3.5 + Vite 5

这套架构是为高并发、多语言、跨区域的移动端业务设计的（如国际 APP、MVNO 通信、商旅服务），遵循"Less is More, Speed is King"：尽量少折腾，尽量快。

1. 架构总览

目标三个：极简架构（用自动化干掉 90% 样板代码）、接近原生的流畅体验、通过规范约束防止长期维护里代码烂掉。

2. 技术选型与理由

2.1 构建与工程化：Vite 5 + Unplugin 生态

路由即文件系统：用 unplugin-vue-router。路由配置表不用手写，目录结构自然统一（Domain-based），协作冲突少。

隐式自动引入：auto-import + vue-components。import 写少了，专注业务就行。

遗留兼容：@vitejs/plugin-legacy。现代 ESM 开发体验保留，低端机型用 Polyfill 兜底，渐进增强。

2.2 视觉与适配：UnoCSS + PostCSS Mobile Forever

UnoCSS 编译时原子化，零运行时，CSS 体积随项目增长是对数曲线不是线性，膨胀问题基本解决。

视口适配用 presetRemToPx (base 4) + postcss-mobile-forever (375px, Max 1000px)。开发继续用 px，编译自动转 rem；最大宽度 1000px 限制，iPad/PC 上不至于拉伸变形。

2.3 状态管理：Pinia + PersistedState

按业务域拆 Store（mvno, trains, flights），再细分 passengerStore、bookStore。不搞单一大 Store，业务逻辑各管各的，减少交叉污染。

pinia-plugin-persistedstate 做持久化，H5 刷新或后台被查杀后能恢复状态，接近 Native 体验。

2.4 全球化与网络层：Vue I18n + Axios 封装

Axios 拦截器按 Region（UK/SG/TH）动态 replaceUrl，业务不关心物理部署，一套代码全球跑。

响应拦截器集成 xxxCrypto，加解密对业务透明，安全层和业务层隔离。

vue-i18n 联动 Vant/JTDesign 语言包，日期、弹窗等 UI 细节随语言自动切。

3. 技术栈速查

Core: Vue 3.5 + Vite 5（Composition API, Script Setup） Router: Vue Router 4（Hash Mode, 文件路由） State: Pinia（模块化 Store, LocalStorage 持久化） UI/CSS: Vant 4 + UnoCSS Network: Axios（动态 BaseURL、Token 注入、响应解密） I18n: Vue I18n 11 Build: Terser（drop_console, chunkSizeWarningLimit: 2048）

4. 性能与维护

FCP < 1.0s、TTI < 1.5s，核心包 gzip 后控在合理范围，Echarts/Axios 等重型依赖独立分包。

扩展性：新增"酒店业务"之类的模块，在 src/pages 建目录、加 Store 就行，不用动核心。Composables 把逻辑和 UI 拆开，API 独立封装，方便单测。工具链自动化后，人力成本自然下去。

5. 总结

这套东西不算花哨，重在平衡开发效率和运行性能，用模块化压住复杂度。做企业级 Global H5 的时候，算一个靠谱的起点。