首页分享 vue3 + vite4.0 开发项目（PC端和移动端共用一套代码）

vue3 + vite4.0 开发项目（PC端和移动端共用一套代码）

来源：花匠小妙招时间：2024-12-07 18:35

做公司官网，为了实现PC端与移动端自适应的问题，决定使用 vue 开发项目，写两套代码，并***采用路由控制，加载PC端代码还是移动端代码，通过屏幕宽度大小来判断加载相应端的代码***。
其中产生的一些问题及难点在这里进行一些记录。

1、创建两套代码的文件夹

创建两套代码的文件夹，其中包含移动端、PC端的所有的内容。
在这里插入图片描述
其中的 index.vue 文件是用来存放的，用于展示路由组件。

2、创建一个文件用于展示两个index.vue组件

创建一个文件用于引入并展示两个index.vue组件,也就是用于判断是pc端、还是移动端的组件进行展示。我是放在了 views 文件夹下，直接创建了一个 index.vue 文件。
其中 devices 是用于获取当前的窗口状态，‘pc’则是PC端，‘mobile’是移动端。
在这里插入图片描述
代码如下：

3、状态管理 devices

这里主要是使用 pinia 创建了一个状态管理，用于存储，可以全局使用。
在这里插入图片描述
代码如下：

// 管理设备数据 import { defineStore } from 'pinia' import { ref } from 'vue' export const deviceStore = defineStore('devices', () => { const device = ref('pc') // 默认是PC端，====》 PC端：pc、移动端：mobile /** * 切换设备类型 * @param {*} type */ const handleToChangeDevice = (type) => { device.value = type } return { device, handleToChangeDevice } })

1234567891011121314151617181920

4、两套路由

将PC端代码与移动端代码分别写在两套路由表里面，默认的 index.js 中如如这两套路由表，并且默认展示 PC 端的路由。
在这里插入图片描述
其中移动端的路由表，大概如下：

export const mobile = [ { path: '/', name: 'mobile', component: () => import('@/views/index.vue'), redirect: '/', children: [ { path: '/', component: () => import('@/views/MLayout/index.vue'), redirect: '/home', children: [ { path: 'home', component: () => import('@/views/mobile/Home/index.vue') }, { path: 'serve', component: () => import('@/views/mobile/Serve/index.vue') }, { path: 'product', component: () => import('@/views/mobile/Product/index.vue') }, { path: 'case', component: () => import('@/views/mobile/Case/index.vue') }, { path: 'about', component: () => import('@/views/mobile/About/index.vue') }, { name: 'detail', path: 'detail/:id', component: () => import('@/views/mobile/Detail/index.vue') } ] }, ] } ]

12345678910111213141516171819202122232425262728293031323334353637383940414243

这里也不需要进行路由守卫的检测，否则会陷入无限重定向的问题。

5、检测屏幕变化

最后是检测屏幕变化的这一部分，主要是放在了 APP.vue 里面。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

这样就实现了实时根据屏幕大小变化路由的操作了，并且不需要手动刷新页面。

关于移动端适配的问题

这里采用的是 postcss-pxtorem 插件，

npm install postcss-pxtorem npm install amfe-flexible 12

因为是使用 vite 创建的项目，里面支持 postcss ，可以直接在 vite.config.js 中直接进行配置：

css: { ... // pxtorem插件 postcss: { plugins: [ postCssPxToRem({ rootValue: 37.5, // 1rem，根据设计稿宽度/10 进行设置 propList: ['*'], // 需要转换的属性，这里选择全部都进行转换 // 只有mobile端需要进行rem转换 exclude: (e) => { if (/src(|/)views(|/)mobile/.test(e) || /src(|/)views(|/)MLayout/.test(e)) { return false } return true } }) ] } }

12345678910111213141516171819