一个Vue项目同时包含PC端页面和移动端页面

项目需求:

路由相同（链接），但是移动端和PC端打开的界面完全不同 由于该查询链接可以在pc端打开，也可以发给别人，别人直接用手机打开，所以该search页面需要适配移动端和pc端。又因为移动端和pc端的设计页面差别过大，导致我们无法使用响应式的方式来处理，所以我们需要分别写两个页面来对应移动端和pc端的页面(这两页面都是在同一个vue项目) 大致效果： pc端: 移动端：

解决方案:

跳转到search页面之后，使用v-if来判断是显示移动端的组件还是pc端的组件 在mounted中调用，判断设备的方法，才知道显示的是哪个组件。 判断移动端的方法如下:

tips：这里使用的是组件的方式来处理的。其实也可以用路由的方式来处理，将移动端和pc端都写成一个路由，如/pc和/mobile,然后我们在/search页面判断设备，如果是手机则在mounted中跳转手机的页面，不是则pc端。这样子用路由的方式也可以达到目的。

其他：

移动端虽然只是有几个页面，但是我们还是需要使用到并且进行适配的。

1.vant使用：

a.安装

npm i vant

b.使用vant，这里直接是使用常规用法的方式来做了，因为用到的组件比较少，所以没必要全部导入

import {
          
    createApp } from vue;
// 1. 引入你需要的组件
import {
          
    Button } from vant;
// 2. 引入组件样式
import vant/lib/index.css;

const app = createApp();

// 3. 注册你需要的组件
app.use(Button);

2.适配移动端

因为我们pc端的项目是已经做了响应式适配的，不需要再进行适配了，但是移动端的话还是需要适配的，不然跟着UI的750px的设计稿不适配，会有很大的问题。所以我们选择了。 a.安装依赖：

npm install postcss-px-to-viewport -D

b.在vite.config.ts中配置:

import postcsspxtoviewport from postcss-px-to-viewport
 css: {
          
   
      postcss: {
          
   
        plugins: [
          postcsspxtoviewport({
          
   
            unitToConvert: px, // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: [*], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: vw, // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: vw, // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: [ignore-], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            // exclude: [],
            include: [/form-info-card/,/mobile-page/, /shareMb/, /editMb/], //如果设置了include，那将只有匹配到的文件才会被转换
            landscape: false // 是否处理横屏情况
          })
    },

在使用这个vw方案的时候还出现了很多其他的问题（比如只适配移动端页面但是include不生效，以及如何针对vant做适配），如下面这篇文章，大家做的时候也可以看看。 其他出现的问题处理如该文章：