vue cli3 pc端适配（亲测有效）

对行内样式无效喔~ 而且会影响ui框架

npm下载依赖包

npm i postcss-px2rem -S
npm install postcss-pxtorem -S
npm i px2rem-loader -S

在工具栏文件夹下新建rem.js，并在main.js文件里面引入

// rem等比适配配置文件
// 基准大小
const baseSize = 192
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  // document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
  document.documentElement.style.fontSize = baseSize * scale + 'px'
  console.log(document.documentElement.style.fontSize)
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

在vue.config.js中，配置以下内容：

const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 192
})

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [postcss]
            }
        },
    },

};

---

npm装包时-S和-D的区别

npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。
npm install name -save-dve 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。

 

-D后，安装包会在package中的  devDependencies对象中。简称dev。dev是在开发环境中要用到的。

举例：

构建工具：gulp和webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在dev中所以要用  -D

 

-S后，安装包会在package中的  dependencies  对象中。简称dep。dep是在生产环境中要用到的。

举例：

项目插件：例如element ui、echarts这种插件要在运行中使用的，就要放在dep中所以就用  -S

 

 

一般我们项目插件，在api中都可以看到，一般都是-S。因为这些插件是在程序运行中使用的。