安装：
这是基于vue-cli2.0脚手架配置的实例
1.安装： 如果Ui组件用的是vant需要安装lib-flexible不安装·打包到测试服或者生产服会有一些差异（vant 37.5为准）
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.19.2",
"lib-flexible": "^0.3.2",
"px2rem-loader": "^0.1.9",
"vant": "^2.5.5",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
npm install XX --save
lib—flexible
px2rem-loader
amfe-flexible
main.js引入：
import 'lib-flexible';
import 'amfe-flexible/index.js'
配置.postcssrc.js（需要在项目中新建一个js文件）：
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {}
}
}
配置bulid文件夹下的utils.js：
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
再则在generateLoaders（）函数：
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) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
<title>自适应</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
如果在vue-cli3脚手架配置也是大同小异：（在vue.config.js中配置）
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5, //基准值(计算公式：设计图宽度/10)，设计图尺寸为基准值为375/10 = 37.5
propList: ['*']
})
]
}
}
}
}
