vue 项目移动端适配iOS，安卓

1.首先把安装amfe-flexible，这里使用npm installnpm i -S amfe-flexiblenpm i postcss-pxtorem --save-2.在入口文件main.js中引入import ‘lib-flexible’3.在config加入const path = require('path')module.exports = {css: {loaderOption

Sunny

2943人浏览 · 2022-03-10 15:27:08

Sunny · 2022-03-10 15:27:08 发布

1.首先把安装amfe-flexible，这里使用npm install

npm i -S amfe-flexible
npm i postcss-pxtorem --save-
2.在入口文件main.js中引入

import ‘lib-flexible’

3.在config加入

const path = require('path')
module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
      },
     
}

4.postcssrc.js 文件

module.exports = {
  "plugins": {
    // "postcss-import": {},
    // "postcss-url": {},
    // // to edit target browsers: use "browserslist" field in package.json
    // "autoprefixer": {}
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      "remUnit": 50,  //换算的基数，1rem == 75px
      "exclude": /node_modules/i   //屏蔽第三方组件库，避免把第三方组件库的px也转成rem，这里是屏蔽了所有第三方，也可以屏蔽单独的某一个第三方组件库。
    }
  }
}