一、前言
最近在弄pc/mobile多页面应用，遇到几个问题，因此记录一下，以便回顾。
二、问题
- pc/mobile两端文件数据，多套or共享
- 多页面应用，怎么使用nginx web服务部署
- 生产环境域名、路由处理方式
- 实现两端双向重定向跳转
- 本地开发，配置路径访问
三、解决方式
-
首先我们两端的内容大致相同，pc端和mobile端最大的区别是在于样式、排版，所以说这块将主要内容都进行抽离成配置文件来获取，组件被解耦成
pure component，通过数据注入去实现页面的内容填充。 -
pc/mobile两个服务在nginx处理上应该是有很多做法的，为了后期可以做一些方向性的处理，所以多页面势在必行，这里就需要提供两个.html入口，代码可以分开打包也可以并行打包，因为两个包在很多地方会有相同依赖文件和资源文件，并且为了打包效率，所以我采用了两个项目都走单一文件流、合并打包的方式。
-
我知道的有两种常见的处理方式。
-
一种是单域名二级路由控制不同.html的入口，比如
www.home.com/和www.home.com/m，需要在nginx配置、web项目中（base相对路径）两处做一些处理，好处是只有一个域名，不好的地方就是可能会有路由冲突，但是也是可以规避的。 -
还有一种方式是使用类似
www.home.com/和m.www.home.com/，这两个域名去对应两个.html文件，这样的话域名是完全隔离开的，每个域名对应的服务都是一个独立的web服务，缺点就是需要使用2个域名，其他的我暂时没想到。（有做过类似功能的评论区可以说点心得）
-
nginx设备重定向跳转可以借鉴我的另外一篇文章juejin.cn/post/711680…，认为有帮助的别忘了点赞了!
-
这个问题我尝试了两种方式，我先说方式，再说选择。
方式：
-
多配置文件构建，等于说需要将项目拆分成2个项目，或者说最起码，需要将入口文件，以及文件流都独立开来，build相关也是独立的，那么独立去维护会比较清晰，但是问题也很明显，就是一旦有什么配置需要共享使用、有公共的方法、配置，都需要重新复制一份，这样下来会非常麻烦，但是其实打包这块并不用刻意去独立开来，因为pc/mobile端的区分目前来说在build这块影响面不是很大。好处是这样可以将端、环境清晰化，这样开发的时候可以从不同的服务去调试，在路由上的冲突会比较少，不需要刻意注意什么，也不会遇到
no location...这样的error。 -
单配置文件构建、多路由处理，这块解决的就是开发环境下怎么同时在一个服务下，去访问多页面。官网给的demo没有考虑到第三方路由包，比如我使用的是
react router dom，在开发环境下，/路由是基本配置，但是/mobile这个路由不仅仅需要依赖vite官方配置，在build下去配置对应的mobile --> mobile.html，还需要在mobile.html引用的独立router配置中，加上basename的处理（需要区分dev和其他环境），这点是非常重要的，不然做不到同时访问多页面。
四、结束语
说了这么多，不知道有没有人看懂，希望能对看到的人有所帮助。
觉得写的不错的话还请点个赞，码字不易。
