Vue同一项目适配不同平台（PC端和移动端）

Vue同一项目适配不同平台，包括PC端和移动端

PC端项目做完之后，就要开发移动端了，由于项目较复杂，且PC和移动端仅有界面不一样，数据和要实现的功能都是一样的，所以需要在同一个项目中做适配。

同一项目PC端和移动端适配有两种方案：

路由适配

  路由适配就是在路由导航守卫中判断设备，然后根据设备进入不同的程序入口，但是这种方案有一个缺点，我在PC端输入移动端的地址会怎样？不能进入移动端的页面，所以还要根据设备针对另一平台做路由拦截。

  路由适配可以参考下面这篇博客：

  /qq_39985298/article/details/105444668

组件适配

  组件适配就是在同一个路由中，根据设备使用不同的组件，我比较偏向这种方案，PC端和移动端针对同一页面，都是同一地址，方便开发和记忆，也不需要另外分开维护路由。

  组件适配可以参考：

  /p/21dfda02fc47

  我完善了一下，下面是router.js

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import M1 from '../views/mobile/M_1.vue'// import PC1 from '../views/pc/PC_1.vue'import PC2 from '../views/pc/PC_2.vue'Vue.use(VueRouter)// 如果是移动端，给 .vue 的命名特殊处理，这里多了一级目录 mobile/const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import('../views/About.vue')},{path: '/m1',name: 'M1',component: M1},{path: '/pc1',name: 'PC1',component: resolve => {require([`../views/${path}PC_1.vue`], resolve) }},{path: '/pc2',name: 'PC2',component: PC2}]const router = new VueRouter({routes})export default router

但是在实际项目中，我暂时还没有将所有的路由都分别适配不同的组件，因为很多路由页面仅仅是界面不一样，调用的数据和方法都是同一个，也就是在Vue中只有“script”部分是一模一样的，这个暂时还没找到很好的解决方案，只是使用v-if属性在同一个vue组价中根据平台渲染不同的template元素