摘要：最近在写移动端项目就想用，来进行适配把转换成但是也用到了第三方组件库把这个引入发现一个问题就是的组件都缩小了在网上找不到答案最后在一个开发群里找到了解决的方法目前的处理方法是将组件中转化为，避免被转成在中中配置以下代码自定义的全局
最近在写移动端项目,就想用lib-flexable，px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX，避免被转成rem
在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://www.ucloud.cn/yun/53187.html
摘要：做移动端时，适配是必须的。使用单位，可在不同屏幕上完美显示相同的布局。文件首先要把转成正常的，在交给来做，所以是外还需要加上一个设计稿宽度表示转换过程小数保留几位。安装配置结束后，重启项目。会发现自己设置的被转为了。 做移动端时，适配 是必须的。使用rem单位，可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 1. 自己手动构建vue webpck配置...
摘要：这应该是项目在适配移动端时候，最简单的方法之一下面是基本步骤使用下载并引入在中引入将添加到在中添加如下配置代码如下这个是重点，设计稿是完了就可以直接用做单位按照的设计稿撸代码了， 这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...
摘要：这应该是项目在适配移动端时候，最简单的方法之一下面是基本步骤使用下载并引入在中引入将添加到在中添加如下配置代码如下这个是重点，设计稿是完了就可以直接用做单位按照的设计稿撸代码了， 这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 ...
摘要：一般需用这个在后面添加会根据的不同，生成三套代码。如果明白了这些方法，就没必要再配置的了，因为下面的方法更容易控制外部引入的是否需要转，而更改就控制不了了，它会强制转换。能正常转换不能正常转换不能正常转换 基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应 没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem，而字体要用px...
阅读 2089·2021-11-05 09:42
阅读 2819·2021-09-23 11:21
阅读 2814·2019-08-30 14:00
阅读 3292·2019-08-30 13:15
阅读 445·2019-08-29 17:18
阅读 3519·2019-08-29 16:29
阅读 2715·2019-08-29 14:06
阅读 2779·2019-08-23 14:41
