vue全局设置自适应

我们可以按照设计稿正常开发，单位依然使用px，控制台调试时可以看到已经自动转为rem

注意：该方法对设置的行内css无效，如果需要设置行内css的，单位我们可以使用rem（100px = 1rem）

1、安装相关插件

// 安装autoprefixer插件
npm i --save-dev @types/autoprefixer
或者
npm install -g autoprefixer【优先尝试这个】

// 安装postcss-pxtorem插件
npm i --save-dev @types/postcss-pxtorem
或者
npm i postcss-pxtorem@5.1.1 【优先尝试这个】

2、在index.html文件中写入下方js方法

 代码如下：

// 设置全局fontSize
(function(doc, win) {
    let docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            let width = Number((docEl.clientWidth / 19.2).toFixed(2).replace(/0+$/g, '')) // 保留两位小数并去除多余的0
            docEl.style.fontSize = width + 'px'
            console.log(width)
        }
    recalc() // addEventListener有延迟 所以先调用一次 解决首屏login大小变化问题
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

3、在vue.config.js中进行配置

代码如下：

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
    css: {
       // css相关配置
       sourceMap: isProduction ? false : true, // 开启 CSS source maps?
       loaderOptions: {
         postcss: {
           // 给postcss-loader传递选项
            plugins: [
               autoprefixer(),
                    new pxtorem({
                    rootValue: 100, // 换算的基数
                    //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                    // selectorBlackList: ["ig"],
                    propList: ['*'],
                    // unitPrecision: 4, //单位转换后保留的小数位数
                    replace: true, // 是否直接更换属性值，而不添加备用属性
                    exclude:[ /node_modules/,/dist/],
                  }),
                  /* new pxtovw({
                    unitToConvert: 'px', //需要转换的单位，默认为"px"；
                    viewportWidth: 1920, //设计稿的视口宽度
                    viewportHeight: 1080,
                    unitPrecision: 2, //单位转换后保留的小数位数
                    propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
                    viewportUnit: 'vw', //转换后的视口单位
                    fontViewportUnit: 'vw', //转换后字体使用的视口单位
                    selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
                    minPixelValue: 1, //设置最小的转换数值
                    mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
                    replace: false, //是否直接更换属性值，而不添加备用属性
                    exclude: [/node_modules/], //忽略某些文件夹下的文件
                  }), */
              ],
          },
        },    
    }            
}

我在以前项目中这样写法是没有报错的，但是我在新项目中同样的写法然后在运行项目的时候报错了

 百度了下问题，最后成功解决：大神链接-->https://blog.csdn.net/qq_43294027/article/details/127669173

最后是这样的：

 代码如下：

// const { defineConfig } = require("@vue/cli-service");

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production'


module.exports = {
  transpileDependencies: true,
  css: {
    // css相关配置
    sourceMap: isProduction ? false : true, // 开启 CSS source maps?
    loaderOptions: {
      postcss: {
        // 给postcss-loader传递选项
        postcssOptions: {
          plugins: [
            autoprefixer(),
            new pxtorem({
              rootValue: 100, // 换算的基数
              //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
              // selectorBlackList: ["ig"],
              propList: ['*'],
              // unitPrecision: 4, //单位转换后保留的小数位数
              replace: true, // 是否直接更换属性值，而不添加备用属性
              exclude: [/node_modules/, /dist/],
            }),
            /* new pxtovw({
              unitToConvert: 'px', //需要转换的单位，默认为"px"；
              viewportWidth: 1920, //设计稿的视口宽度
              viewportHeight: 1080,
              unitPrecision: 2, //单位转换后保留的小数位数
              propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
              viewportUnit: 'vw', //转换后的视口单位
              fontViewportUnit: 'vw', //转换后字体使用的视口单位
              selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
              minPixelValue: 1, //设置最小的转换数值
              mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
              replace: false, //是否直接更换属性值，而不添加备用属性
              exclude: [/node_modules/], //忽略某些文件夹下的文件
            }), */
          ],
        },
      },
    },
  }
};

运行结果：