cli3 px转rem适配移动端_vue-cli 2.x和3.x配置移动端适配px自动转为rem

vue-cli2.x

1. 安装依赖

npm install px2rem-loader --save-dev

npm install lib-flexible --save

2. 在 src/main.js 中引入

import 'lib-flexible';

3. 在 build/utils.js 中加入以下代码

exports.cssLoaders = function (options) {

// ...

const px2remLoader = {

loader: 'px2rem-loader',

options: {

remUnit: 75

}

}

// ...

function generateLoaders (loader, loaderOptions) {

// 在原来的loader添加上px2remLoader

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

// ...

}

}

4. 如果想要页面的viewport缩放则需要将 index.html 中注释掉原来的设置

vue-cli 3.x

1. 下载依赖

npm install postcss-pxtorem --save-dev // 此处和2.x 不一样的插件

npm install lib-flexible --save

2. 在 src/main.js 中引入

import 'lib-flexible/flexible.js'; // 此处和2.x不一样

3. 在package.json中配置

// 在最后添加此脚本

{

"postcss": {

"plugins": {

"autoprefixer": {},

"postcss-pxtorem": {

"rootValue": 75,

"propList": [

"*"

]

}

}

}

}

4. 如果想要页面的viewport缩放则需要将 public/index.html 中注释掉原来的设置， 通上面的第四步