參考地址??https://www.cnblogs.com/WQLong/p/7798822.html

1.下載lib-flexible

使用的是vue-cli+webpack，通過npm來安裝的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import ‘lib-flexible/flexible‘

3.設置meta標簽

通過meta標簽，設置設備寬度以及縮放比例

4.安裝px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

這里是重要的一步~~

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：

const cssLoader ={

loader:‘css-loader‘,

options: {

minimize: process.env.NODE_ENV=== ‘production‘,

sourceMap: options.sourceMap

}

}const px2remLoader ={

loader:‘px2rem-loader‘,

options: {

remUnit:75 //這里設置html根字體，vant-UI的官方根字體大小是37.5

}

}

同時，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ?[cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]if(loader) {

loaders.push({

loader: loader+ ‘-loader‘,

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}if(options.extract) {returnExtractTextPlugin.extract({

use: loaders,

fallback:‘vue-style-loader‘})

}else{return [‘vue-style-loader‘].concat(loaders)

}

}

6.安裝?postcss-pxtorem

npm install postcss-pxtorem --save-dev

7.在根目錄找到.postcssrc.js文件? 插入一下代碼

‘autoprefixer‘: {

browsers: [‘Android >= 4.0‘, ‘iOS >= 7‘] //添加瀏覽器前綴 安卓4.0版本，ios 7.0版本以上

},‘postcss-pxtorem‘: {

rootValue:37.5,

propList: [‘*‘]

}

}

8.重啟，一切ok~

當配置完之后，只需要重啟下服務，就自動轉化為rem了

npm run dev

總結

以上是生活随笔為你收集整理的vant部署_vant ui rem配置流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。