vue项目PC端移动端适配方案

本方案的核心主要是采用vue-router来实现的。

首先我们需要有pc端和移动端的两种版本的vue文件，然后配置好自己的路由，下面是我的路由配置。

import Vue from "vue";
import VueRouter from "vue-router";Vue.use(VueRouter);//默认路由
export const routes = [{path: "/",redirect: "/home",},
];
//pc端的路由
export const pcRoutes = [{path: "/",redirect: "/home",},{path: "/home",name: "Home",component: () =>import(/* webpackChunkName: "about" */ "../views/home/pc.vue"),},
];
//移动端设备路由
export const mobileRoutes = [{path: "/",redirect: "/home",},{path: "/home",name: "Home",component: () =>import(/* webpackChunkName: "about" */ "../views/home/mobile.vue"),},
];const createRouter = () =>new VueRouter({scrollBehavior: () => ({ y: 0 }),mode: "history",routes: routes,});const router = createRouter();// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {const newRouter = createRouter();router.matcher = newRouter.matcher; // reset router
}export default router;

配置好路由之后我们就可以先写一个判断是否为移动端的方法，我默认放置的位置为 src/utils/index.js中，具体实现代码为：

// 判断设备是否为移动端的方法
export const isMobile = () => {return /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(navigator.userAgent);
};

写好工具之后，再到src目录下创建一个init.js文件用于判断机型从而添加相应的路由，具体实现代码如下。

import router from "./router";
import { isMobile } from "./utils";
import { pcRoutes, mobileRoutes } from "./router";// 判断当前设备的型号从而改变当前路由
router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1]);

最后在vue项目的入口文件main.js文件中引入init.js。

import "./init.js";

以上，有啥不对的还请指教，祝少掉头发。

vue项目PC端移动端适配方案相关推荐

vue项目PC兼容移动端
做完的pc项目要求兼容移动端,常规操作的话是新做一个webapp后再来回跳转, 当前pc项目没有太多的交互和复杂的页面,所以决定在一个项目里进行兼容适配 1.新建两个组件,pc端页面组件,m端页面组件 ...
移动端高清适配方案（解决图片模糊问题、1px细线问题）
移动端高清适配方案(解决图片模糊问题.1px细线问题) 参考文章: (1)移动端高清适配方案(解决图片模糊问题.1px细线问题) (2)https://www.cnblogs.com/superliz ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
【Vue】pc和移动端网页样式适配
在下面环节会讲解怎么做pc和移动端网页样式适配. 在当下有两种实现样式适配的:JS 适配方案和CSS 媒体查询适配.下面会具体讲解一下代码该怎么写.
移动/PC端的一些适配方案
一.多种屏幕(响应式) 响应式是一种在多种设备(比如pc端移动端)不同分辨率情况下使界面展现最大程度适应尺寸的手段.响应式包含了移动端适配,也可以使移动端不同分辨率展现不同样式.移动端适配则相对精准 ...
Web移动端最强适配方案总结，没想到这么好用！
点击上方的终端研发部,右上角选择"设为星标" 一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多 ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
Vue 项目中各种痛点问题及方案
作者:愣锤原文:https://juejin.im/post/6844903632815521799 最近要求使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中 ...
nginx部署vue项目加载资源慢优化方案
目录 1.问题 2.解决方案推荐gzip压缩解压 2.1 vue项目的配置文件中加如下配置 2.3 nginx服务器配置 1.问题当我采用nginx部署了vue的项目后发现第一次访问网站需要1分左右 ...

vue项目PC端移动端适配方案

vue项目PC端移动端适配方案相关推荐

最新文章

热门文章