vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
2023-09-27 14:26:44 时间
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem
可以参考一下这篇文章vue中的适配:px2rem在webpack.base.conf.js中 vuxLoader中配置以下代码
{
name: 'vux-ui'
},
{
name: 'after-less-parser',
fn: function (source) {
if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
source = source.replace(/px/g, 'PX')
}
// 自定义的全局样式大部分不需要转换
if (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > -1) {
source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
}
return source
}
},
{
name: 'style-parser',
fn: function (source) {
if (this.resourcePath.replace(/\\/g, '/').indexOf('vux/src/components') > -1) {
source = source.replace(/px/g, 'PX')
}
// 避免转换1PX.less文件路径
if (source.indexOf('1PX.less') > -1) {
source = source.replace(/1PX.less/g, '1px.less')
}
return source
}
}
如果是使用cnpm的 就需要把/vux/components那段 要改成vux/components
使用vue-cli 3.x的,在vue.config.js 配置以下代码
configureWebpack: config => {
require('vux-loader').merge(config, {
plugins: [{
name: 'vux-ui'
},{
name: 'after-less-parser',
fn: function (source) {
if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
source = source.replace(/px/g, 'PX')
//资源中有引入1px.less文件的,上面也会将文件名替换成1PX.less,所以要替换回来避免构建报错
source = source.replace(/1PX.less/g,'1px.less');
}
// 自定义的全局样式大部分不需要转换
return source
}
},{
name: 'style-parser',
fn: function (source) {
if (this.resourcePath.replace(/\\/g, '/').indexOf('/vux/src/components') > -1) {
source = source.replace(/px/g, 'PX')
source = source.replace(/1PX.less/g,'1px.less');
}
return source
}
}]
})
}
来源
** https://github.com/airyland/v... , 此方法是vux作者提供的解决方法
原文地址:https://segmentfault.com/a/1190000016866076相关文章
- ant-design-vue upload组件onchange成功不回调
- vue路由与组件引用
- 如何用vue实现模态框组件
- vue组件上绑定原生事件
- 微信小程序家庭理财系统+后台管理系统|前后分离VUE
- 精品微信小程序家教信息管理系统|招聘求职兼职+后台|前后分离VUE
- 尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)
- vue element-ui 修改el-tooltip的箭头颜色
- Vue函数式组件 简单实现
- Mac OS X下安装Vue脚手架(vue-cli)
- Vue.js 子组件的异步加载及其生命周期控制
- vue 阿里云上传组件
- Vue动态组件&异步组件
- 为公司架构一套高质量的 Vue UI 组件库
- JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)
- vue 全选组件封装
- 【Vue 开发实战】基础篇 # 5:理解单文件组件
- Vue.js之父子组件
- vue,keep-alive的作用
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- Webpack + vue-loader构建单文件vue组件
- vue——利用intersectionOberver实现全局appear/disappear事件