vue开发项目(PC端和移动端共用一套代码)(一)

2023-10-30

编写两套代码,通过路由加载不同端的文件

1、创建vue项目

2、基本配置

2.1、html设置

① 创建两端的vue文件

 ② 在App.vue中,添加:

2.2、路由设置

在router文件夹下,创建m、pc两个文件夹,路径如下:

 router/m/index.js内容如下:

router/pc/index.js内容如下:

router/index.js使用默认值,不修改

2.3、main.js设置

① 在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 { mobileRoutes } from './router/m'
import { pcRoutes } from './router/pc'

console.log(mobileRoutes)
// 判断当前设备的型号从而改变当前路由
router.addRoute(isMobile() ? mobileRoutes[0] : pcRoutes[0])

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

结果如下:

pc端:

移动端:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue开发项目(PC端和移动端共用一套代码)(一) 的相关文章

随机推荐