vue.config.js webpack配置 px2rem-loader自適應處理

法一:webpack配置

config.module
  .rule('svg')
  .exclude.add(resolve('src/icons'))
  .end()
config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
  .end()

// set preserveWhitespace
config.module
  .rule('vue')
  .use('vue-loader')
  .loader('vue-loader')
  .tap(options => {
    options.compilerOptions.preserveWhitespace = true
    return options
  })
  .end()

config.module
.rule('scss')
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 36, remPrecision: 8 })
.end()

法二:vue的main.js添加

// 設定body文字尺寸
const setHtmlFontSize = () => {
// 640 默認設計稿大小; 640px = 6.4rem ;每個元素px基礎上/100
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0];
// 設置根元素字體大小
htmlDom.style.fontSize = htmlWidth / 6.4 + 'px';
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();

————————————————
版權聲明:本文為CSDN博主「xyphf_和派孔明」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權協(xié)議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/xyphf/article/details/107934292

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末舆声,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌肢专,老刑警劉巖舞肆,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異博杖,居然都是意外死亡椿胯,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門剃根,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哩盲,“玉大人,你說我怎么就攤上這事狈醉×停” “怎么了?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵苗傅,是天一觀的道長抒线。 經(jīng)常有香客問我,道長金吗,這世上最難降的妖魔是什么十兢? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮摇庙,結果婚禮上旱物,老公的妹妹穿的比我還像新娘。我一直安慰自己卫袒,他們只是感情好宵呛,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著夕凝,像睡著了一般宝穗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上码秉,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天逮矛,我揣著相機與錄音,去河邊找鬼转砖。 笑死须鼎,一個胖子當著我的面吹牛,可吹牛的內容都是我干的府蔗。 我是一名探鬼主播晋控,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼姓赤!你這毒婦竟也來了赡译?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤不铆,失蹤者是張志新(化名)和其女友劉穎蝌焚,沒想到半個月后裹唆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡只洒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年品腹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片红碑。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖泡垃,靈堂內的尸體忽然破棺而出析珊,到底是詐尸還是另有隱情,我是刑警寧澤蔑穴,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布忠寻,位于F島的核電站,受9級特大地震影響存和,放射性物質發(fā)生泄漏奕剃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一捐腿、第九天 我趴在偏房一處隱蔽的房頂上張望纵朋。 院中可真熱鬧,春花似錦茄袖、人聲如沸操软。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽聂薪。三九已至,卻和暖如春蝗羊,著一層夾襖步出監(jiān)牢的瞬間藏澳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工耀找, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留翔悠,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓涯呻,卻偏偏與公主長得像凉驻,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子复罐,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內容