Vue浏览器适配(vue2+vue3)

vue cli2.x适配

1、安装lib-flexible

npm install lib-flexible --save

2、全局引用文件（在mian.js中引入）

import 'lib-flexible/flexible'

3、在项目根目录index.html中添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4、安装px2rem-loader

npm install px2rem-loader --save

5、

（1）在build/utils.js文件配置px2rem-loader

（2）在generateLoaders方法中添加px2remLoader\

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      // 使用第三方UI库的时候可能会出现UI插件缩小的情况，此时可以将75改成37.5
      remUnit: 75
    }
  }

修改配置后重启项目，项目中直接使用px单位

vue cli3.x适配

1、安装依赖

npm i amfe-flexible postcss-px2rem -S

2、在main.js中引入

import 'amfe-flexible'

3、在vue.config.js中添加配置项

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5 // 设计图给的375的图就写37.5，也就是1rem=37.5px
              })
            ]
          }
        }
    },
}

vue3+ vite适配

1、安装依赖

npm i amfe-flexible postcss-px2rem -S

2、在main.ts中引入

import 'amfe-flexible'

3、在vite.config.js中添加配置项

export default defineConfig({
//...
 css: {
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5 // 设计图给的375的图就写37.5，也就是1rem=37.5px
              })
            ]
          }
    },
//...
})

vue3+ cli5适配

1、安装依赖

npm i amfe-flexible postcss-pxtorem -S

2、在main.js中引入

import 'amfe-flexible'

3、在根目录新建文件postcss.config.js中添加配置项

module.exports = {
  plugins: {
   'postcss-pxtorem':{
     rootValue: 192, // 设计图的宽度除以10
     selectorBlackList: ['ant-design-vue', 'mu'], // 忽略转换正则匹配项
     propList: ['*']
   }
  }
};

文章参考自组长的文档，需公司网才能打开，此处就不做原文分享了