vue3 + Ts + Vite移动端pc适配教程

使用步骤

1.首先安装两个插件lib-flexible和postcss-pxtorem
        npm i lib-flexible postcss-pxtorem -D

2.配置vite.config.ts（或者vite.config.js）

import { fileURLToPath, URL } from 'url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postCssPxToRem from "postcss-pxtorem"


export default defineConfig({
  base:'/assetapp/',
  plugins: [vue(), vueJsx()],
  css:{
    // 此代码为适配移动端px2rem
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 37.5, // 1rem的大小
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          })
        ]
      }
    },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.找到main.ts(或者main.js) 加入以下代码

import 'lib-flexible'

4.在index.html中加入以下meta，完整代码如下

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">