1、先安装lib-flexible和postcss-pxtorem
可以直接按照以下命令安装即可(一定要严格控制版本号,以下版本可以完美解决依赖冲突问题)
npm install lib-flexible@0.3.2 postcss-pxtorem@5.1.1 --save-dev
或
cnpm install lib-flexible@0.3.2 postcss-pxtorem@5.1.1 --save-dev
(这个是针对配置了淘宝镜像的安装方法)
2、项目中进行一些配置
在我的项目根目录新建vue.config.js文件;
// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)
// 基础路径 注意发布之前要先修改这里
let publicPath = '/'
module.exports = {
publicPath: publicPath, // 根据你的实际情况更改这里
lintOnSave: true,
assetsDir: 'static',
devServer: {//这个是解决跨域问题,配置的代理表
publicPath: publicPath, // 和 baseUrl 保持一致
proxy: {
// 测试环境
'/ZR': {
target: 'http://10.111.113.8:8086', // 测试
// target: 'http://122.114.247.4:8769', // 正式
changeOrigin: true,
pathRewrite: {
'^/ZR': ''
}
}
}
},
css: {//这个是真正解决大屏适配有关的代码
sourceMap: false,
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-pxtorem')({
"rootValue": 192, // 设计稿宽度的1/10,(JSON文件中不加注释,此行注释及下行注释均删除)
"propList": ["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
})]
}
}
},
}
上面就是我的vue.config中的简单配置,其中最重要的css对象中的配置。
3、引入lib-flexible
main.js中引入import 'lib-flexible/flexible'
4、还需要修改的两个坑
(1)、因为lib-flexible是针对移动端的但是我现在是在pc端用,所以直接用的话,会无效,这里也是查了好久才知道要修改他这个插件的源码。
在node_modules->lib-flexible->flexible.js
找到refreshRem 函数修改成下面这样(注释掉refreshRem函数中的if有关的东西)
完成以上步骤,就可以这样直接在项目中使用px布局。 注意:要是项目重新install(安装依赖),flexible.js 这里也要重新修改。
(2)、如果有echarts图,整体适配用的又是lib-flexible插件,那再做echarts图适配的时候需要下面这种写法来做适配:
代码如下:
window.addEventListener("resize", function () {
setTimeout(() => {
myChart && myChart.resize();
}, 400);
})
(1)注意:一定要加一个定时器,并且定时器的时间一定要大于300ms;
(2)、不加定时器的问题:如果不按照“(1)”那样做会出现的问题是,每次屏幕变化,这次echarts图的变化是基于上一次大屏幕的变化而变化的,总是慢一个节奏。 (3)、出现“(2)”中问题的原因如下:
因为lib-flexible插件做的适配是有一个300ms延迟器的,所以你在做echarts适配的时候要加一个大于300ms的延时器。