基于vite多页面实现多端同构开发和部署
内容提要
该文章介绍了基于vite多页面的多端同构开发和部署的实现流程，通过创建多个页面文件并配置不同的入口，实现管理端和用户端的共用模块。建议每个端应用配置自己的路由，常用的路由分为hash模式和history模式。在生产环境中，可以根据url路由区分访问入口，实现不同端访问的资源内容不同。该方案可以减少多个应用的创建和多域名申请，实现工程模块中相同模块和资源的共享复用。
延伸解读
多端同构的适用场景与核心价值
该方案适用于管理端与用户端存在大量共用模块和状态管理机制的项目。通过vite多页面配置不同入口，开发者可在同一工程内同时修改两端共用代码，避免多项目重复修改和发布。其核心价值在于减少应用创建和多域名申请，实现代码与资源的共享复用，并简化多端间的关联交互。
路由模式选择与部署注意事项
每个端需独立配置路由，常用hash和history两种模式。hash模式无需服务端支持，但URL带#；history模式需服务端配合，否则刷新页面会404。本地开发时可通过代理将路由重写至对应入口文件解决。生产环境需根据URL路径将请求分发到不同入口，并配置try_files回退，同时可结合userAgent和白名单限制访问。
权限拦截与入口控制
用户登录后需根据角色判断是否有权访问某入口。可在入口文件（如public.js）中调用后端接口验证，无权限时提示或重定向到有权限的入口。也可通过服务端配置角色和白名单处理。这种前端拦截方式灵活，但需注意接口调用失败时的降级处理，避免阻塞应用初始化。
Q&A
如何实现基于vite的多端同构开发和部署？
通过创建多个页面文件并配置不同的入口，实现管理端和用户端的共用模块。
vite多页面开发中，如何配置路由？
建议每个端应用配置自己的路由，常用的路由分为hash模式和history模式。
hash模式和history模式的路由配置有什么区别？
hash模式的路由不需要服务端支持，而history模式需要服务端支持，否则刷新页面可能出现404错误。
如何解决history模式下刷新页面出现404的问题？
可以通过配置代理，将访问的路由指向本地开发服务器目录文件来解决该问题。
在生产环境中如何根据url路由区分访问入口？
可以根据资源的访问路径，将其指定到不同的应用入口，并在服务端配置检测客户端的userAgent。
基于vite的多端同构方案有哪些优势？
该方案可以实现代码共享、减少多个应用的创建和多域名申请，以及多个应用之间的相互关联交互。
