将项目脚手架升级为cli3后。x，模板简单多了，运行更快了。但是，存在一些兼容性问题。例如，当我们在项目时钟中使用px2rem计算设计草案时，我们不能像旧脚手架一样操作。那我们应该怎么设置呢？

首先，我们应该使用NPM安装postss-px2mrem

然后我们需要在vue.config.js In vue-cli3中创建一个配置。X.构建和配置文件夹将被删除。所有的配置都放在vue.config.js中，但是没有生成这个文件支架，所以需要在项目的根目录中手动创建一个文件

在vue.config.js中配置

module . exports={ lintonsave : true，Css : { loader options : { postscs : { plugins 3360[require(' postscs-plugin-px rem ')))({ rootkvalue 336075，//在新版本中，此值为mediaquery: false。//(布尔值)允许在媒体查询中转换px。MinPixelValue: 3 //设置要替换的最小像素值(3px将被转移到rem)。默认值为0 })，]}} }，}这里需要说明一下。网上搜到的一堆教程都强调要增加remUnit来设置rem的计算标准。但事实上，在新版之后，这个值被rootValue所取代。例如，如果您的设计草图的宽度标准为750，则此处的值可以设置为75。

接下来还有一项工作要做。由于rem是基于根字体的大小，所以我们的移动设备和一些视网膜屏幕的屏幕大小将是普通屏幕的两倍，所以我们需要根据不同的设备来计算这个参考值。这里，我们在src/plugins下创建一个新的rem.js文件(代码如下)。

（函数(win，lib){ var doc=win。文件；var Docel=doc . documentelementvar metaEl=doc。query selector(' meta[name=' viewport ']')；var flexibleEl=doc。query selector(' meta[name=' flexibleEl ']')；var DPR=0；定义变量标度=0;var tidvar灵活=lib。灵活| |(lib。灵活={ })；if (metaEl) { //console.warn('将根据已有的自指的标签来设置缩放比例');var match=metael。GetAttribute(' content ').匹配(/initial-scale=([d).] )/);if(match){ scale=parseFloat(match[1])；dpr=parseInt(1 /比例尺);} } else if(flexible){ var content=flexible。GetAttribute(' content ')；if(content){ var initialDpr=content。匹配(/initial -DPR=([ d ).] )/);var maximumDpr=内容。匹配(/maximum -DPR=([ d ).] )/);if(initialDpr){ DPR=parseFloat(initialDpr[1])；scale=parseFloat((1/dpr).toFixed(2))；} if(maximumDpr){ DPR=parseFloat(maximumDpr[1])；scale=parseFloat((1/dpr).toFixed(2))；} } } if(！dpr！scale){ var是andoid=win。领航员。appversion。match(/Android/gi)；var isIPhone=win。领航员。appversion。match(/iphone/gi)；var devicepixel比率=win。devicepixel比率；if (isIPhone) { //iOS下，对于2和3的屏，用2倍的方案，其余的用一倍方案if (devicePixelRatio=3(！DPR | | DPR=3)){ DPR=3；} else if (devicePixelRatio=2(！DPR | | DPR=2)){ DPR=2；} else { DPR=1；} } else { //其他设备下，仍旧使用一倍的方案DPR=1；}比例=1/DPR；} docEl.setAttribute('data-dpr '，DPR)；if(！metaEl){ metaEl=doc。创建元素(' meta ')；metaEl.setAttribute('name '，' viewport ')；metaEl.setAttribute('content '，' initial-scale=' scale '，最大-比例尺='比例尺'，最小-scale=' scale '，user-scale=no ')；if(Docel。第一个元素子元素){ Docel。第一个元素子元素。append child(metaEl)；} else { var wrap=doc。创建元素(' div ')；包起来。append child(metaEl)；医生。写(包装。innerhtml)；} }函数refresh rem(){ var width=docel。getboundingclientrect().宽度；if(width/DPR 540){ width=540 * DPR；} var rem=width/10；多西尔。风格。font size=rem ' px灵活。=win . rem=rem } win . addeventlistener(' resize '，function(){ clear time out(tid)；tid=setTimeout(refreshRem，300)；}，false)；win.addEventListener('pageshow ')，函数(e){ if(e . persisted){ clear time out(tid)；tid=setTimeout(refreshRem，300)；} }，false)；如果(医生。readystate==' complete '){ doc。尸体。风格。font size=12 * DPR ' px '；} else { doc。add event listener(' DOmContentLoaded '，函数{ doc。尸体。风格。font size=12 * DPR ' px '；}，false)；}刷新rem()；灵活。=win.dpr=dprflexible。刷新rem=刷新rem；灵活。rem2px=函数(d){ var val=parseFloat(d)*这个。remif(类型为d==' string ' d . match(///rem $/){ val=' px '；}返回val}灵活。px 2 rem=函数(d){ var val=parseFloat(d)/this。remif(类型为d==' string ' d . match(/px $/)){ val=' rem '；}返回val}})(窗口，窗口['lib'] ||(窗口[' lib ']={ })；然后在main.js里面引入该文件

"进口"。/plugins/rem.js '这样，我们的工作就完成了。可以直接在钢性铸铁里面写像素的绝对值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。