vite3+vant移动端适配

vw配置

安装插件

npm i -D autoprefixer@^10.4.7 
npm i -D postcss-px-to-viewport-8-plugin@^1.1.3

创建配置文件

根目录创建 postcss.config.cjs

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // 设计稿宽度
      viewportWidth: 375,
    },
  },
};

Rem配置

引入rem适配方案

npm i -D postcss-pxtorem autoprefixer@^10.4.7 
npm i -S amfe-flexible

添加配置文件

根目录添加postcss.config.cjs
注意!!! 必须是.cjs结尾

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

入口文件引入flexible

import { createApp } from 'vue'
+ import 'amfe-flexible'
import App from './App.vue'
createApp(App).mount('#app')

引入vant组件

npm i -S vant@latest
npm i -D unplugin-vue-components@^0.22.0

配置vite.config.ts

import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    })
  ]
})

sass配置

一、安装sass

npm i -D sass

vite.config.ts

 css: {
  + preprocessorOptions: {
     + scss: {
       + additionalData: '@import "@/assets/scss/global.scss";'
     }
   }
},