vue2 怎样简单做到 多入口html 可以自动切换pc、mobile入口渲染不同pc、mobile组件?

Question

1、用户使用电脑浏览器访问vue2.local域名：
展示电脑端页面

2、用户使用tel访问vue2.local域名：
展示手机端页面

尝试过的方案1：
在router.js中使用路由守卫判断是pc还是mobile访问-->进行const couter=不同的router
缺陷：代码耦合很高

尝试过的方案2：
1、在public目录下新建：
pc.html
mobile.html
分别挂载#app、#mobile

2、在src目录下新建：
pc目录：包含app.vue，main.js。page页面和router目录。
mobile目录：包含app.vue，main.js。page页面和router目录。

3、pc目录下的main.js挂载#app，mobile目录下的main.js挂载#mobile

缺陷：
访问不能用hisotory且域名带有vue2.local/mobile.html#/比较长，不好看。

Answer 1

一般这种需求都是要么媒体查询做响应式 UI；要么是完全不同的两个站点了（比如 www.taobao.com 和 m.taobao.com）……

但看起来你的需求是用同一个站点、并且没有做响应式、还需要在不改变路由相同的情况下加载不同的组件（即桌面端和移动端各自存在一套独立的组件，但共享相同的路由名称和路径啥的）？

我不知道你的方案一里所谓“代码耦合很高”是怎么个耦合法，但其实用不着路由守卫，只需要在入口处做一次就可以了：

const routerForDesktop = createRouter({ routes: [ /* 路由定义略 */ ] });
const routerForMobile = createRouter({ routes: [ /* 路由定义略 */ ] });

const app = createApp();
app.use(detectMobile() ? routerForMobile : routerForDesktop); // 咋识别是移动端的你自己写吧；或者反过来判断也行

P.S. 唯一的缺点是如果用户同一个设备一会儿是“桌面端”、一会儿是“移动端”，那么在路由切换时是不会识别出这种变化的，只能是刚加载时是用的哪套路由就还是哪套，但这只有在开发者工具里才会出现，正经用户永远不会触发的，所以其实无需兼容此场景。