1、安装依赖包
cnpm i lib-flexible --save
cnpm i postcss-px2rem --save
2、main.js文件引用
// main.js
import 'lib-flexible'
3、在node_modules包里找到lib-flexible文件夹下的flexible.js文件
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
4、然后在vue.config.js配置中引用对应的文件配置
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 192, //设计稿十等分后的值1rem=192px
remPrecision: 6 //转化后小数点位数
})
module.exports = {
publicPath: '',
outputDir: '../_Publish/reportCenter',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
}
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `static/js/[name].${defaultSettings.appVersion}.${timestamp}.js`,
chunkFilename: `static/js/[name].${defaultSettings.appVersion}.${timestamp}.js`
}
},
css: {
//PC分辨率端适配
loaderOptions: {
css: {},
postcss: {
plugins: {
postcss
}
}
}
},
}
最后重新编译项目即可。