成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[新手坑] 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題

RdouTyping / 4020人閱讀

摘要：新手坑開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題上次提到作用域問題導(dǎo)致樣是不生效這次講的是我之前遇到的一個(gè)小坑稍不留神就完蛋前陣子做的一個(gè)小項(xiàng)目引入了的庫外加自己寫的很多樣式在開發(fā)環(huán)境下測(cè)試完美直接就出來上正式環(huán)境發(fā)現(xiàn)竟然有多處樣式未生效的問題還好

[新手坑] 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題 
上次提到作用域問題, 導(dǎo)致樣是不生效, 這次講的是我之前遇到的一個(gè)小坑, 稍不留神就完蛋.

前陣子做的一個(gè)小項(xiàng)目, 引入了Vant的UI庫, 外加自己寫的很多樣式, 在開發(fā)環(huán)境下測(cè)試完美, 直接就build出來上正式環(huán)境, 發(fā)現(xiàn)竟然有多處樣式未生效的問題! 還好是新項(xiàng)目, 尚未推廣, 因此除了內(nèi)部同事測(cè)試發(fā)現(xiàn), 沒有造成惡劣影響, 不過以后還是要注意下, 開發(fā)環(huán)境看著沒問題, 但是生產(chǎn)環(huán)境一定還是要再過一遍.

那么為什么會(huì)出現(xiàn)這個(gè)問題呢? 我下面來做些小的測(cè)試觀察一下.

問題現(xiàn)象

在開發(fā)環(huán)境下, 每個(gè)不同塊的style都會(huì)被多帶帶提取插入到頁面的head區(qū)域, 而生產(chǎn)出來的的文件是會(huì)被合并成一個(gè)文件, 在開發(fā)環(huán)境下, 這些style塊的順序又和生產(chǎn)環(huán)境編譯出來的css文件內(nèi)的順序有差別, 導(dǎo)致我們?cè)陂_發(fā)環(huán)境中, 使用了相同的優(yōu)先級(jí), 覆蓋原Vant的UI樣式看起來正常, 而在生產(chǎn)后, 順序錯(cuò)誤導(dǎo)致失效了!

為了更加方便測(cè)試, 我在vue-cli-mobile-study項(xiàng)目創(chuàng)建了一個(gè)分支02-build-css-order, 有興趣可以看看~

本來想在不同塊的css中添加注釋以便于更明顯的觀察順序變化, 結(jié)果發(fā)現(xiàn)生產(chǎn)環(huán)境中的注釋被自動(dòng)忽略了, 嘗試去掉cssnano插件執(zhí)行, 發(fā)現(xiàn)還是有部分注釋沒有展示出來, 因?yàn)椴皇呛苤匾? 所以沒有去糾結(jié)這塊.

開發(fā)環(huán)境中的head區(qū)域有效的style有5個(gè). 分別是

index.html中的css樣式

vant的base.css內(nèi)容

路徑為./vue-cli-mobile-study/src/assets/styles/_uireset.css內(nèi)容

App.vue的css內(nèi)容

HelloWorld.vue的css內(nèi)容

而生產(chǎn)出來的卻和這個(gè)不同, 因?yàn)楸缓喜?個(gè)css文件了, 因此我們觀察單個(gè)css文件的上面4塊的順序

index.html中的css樣式

App.vue的css內(nèi)容

HelloWorld.vue的css內(nèi)容

vant的base.css內(nèi)容

路徑為./vue-cli-mobile-study/src/assets/styles/_uireset.css內(nèi)容

當(dāng)然, 其實(shí)在有作用域的組件中所包含的樣式順序?qū)?xiàng)目是沒有影響的, 所以我們需要關(guān)注的是全局引入的樣式順序, 從上面的現(xiàn)象中可以看出, 除了核心文件index.html, 開發(fā)環(huán)境下, Vant樣式默認(rèn)在最前面(Vant實(shí)際上是Babel那邊導(dǎo)入了), 而其他樣式則似乎根據(jù)main.js入口的順序, 以及渲染順序來添加到html頭部的; 而生產(chǎn)環(huán)境下, 相對(duì)詭異.

2018年4月21日補(bǔ)充 
今天因?yàn)榭紤]到Vant的中部分reset樣式并沒有較好的對(duì)頁面進(jìn)行樣式統(tǒng)一, 因此引入normalize.css, 于是基于上面的測(cè)試, 現(xiàn)在擁有6塊style. 而normalize.css在兩種環(huán)境下的區(qū)別還是有的~

我將normalize.css直接寫入main.js的頂部進(jìn)行import, 發(fā)現(xiàn)可以很好的將normalize.css內(nèi)的樣式放在除了不可控制index.html內(nèi)樣式之后的首位. 這樣就很棒棒了, 通常我們會(huì)將normalize.css和reset.css優(yōu)先加載.

問題原因

我有在GitHub查閱過相關(guān)Issues, 也找過StackOverflow相關(guān)內(nèi)容, 不過沒有什么收獲, 外加Webpack的高級(jí)配置方面也不是很熟悉, 因此也就沒有研究出來, 如果有大神能指點(diǎn)一二歡迎留言.

解決方案

在需要覆蓋第三方組件的默認(rèn)樣式是, 盡量使用高于第三方組件優(yōu)先級(jí)的css樣式, 以免出現(xiàn)開發(fā)環(huán)境和生產(chǎn)環(huán)境效果不同的情況.

在自己的組件樣式編寫中, 除了有公共的組件在不同頁面的樣式控制下可能需要全局樣式外, 盡量寫上作用域! 并且一定不要在自己寫的組件內(nèi)使用全局樣式, 很容易出現(xiàn)順序問題導(dǎo)致開發(fā)和生產(chǎn)結(jié)果不一致的情況!

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113108.html

相關(guān)文章

  • [新手坑] 01.Vue模板內(nèi)引入的組件樣式覆蓋失效

    摘要：新手坑模板內(nèi)引入的組件樣式覆蓋失效作為一名剛接觸的菜鳥開發(fā)過程中遇到一些小坑又很難搜索的到還是記錄下來分享給有遇到過類似問題的人項(xiàng)目中假設(shè)用到這個(gè)庫具體引入組件啥的我就不詳細(xì)說了直接看代碼以上代碼的寫法不仔細(xì)看的話通過頁面來看組 [新手坑] 01.Vue模板內(nèi)引入的組件樣式覆蓋失效 作為一名剛接觸Vue的菜鳥, 開發(fā)過程中遇到一些小坑又很難搜索的到, 還是記錄下來. 分享給有遇到過類似...

    Pines_Cheng 評(píng)論0 收藏0

  • JavaScript 踩坑心得— 為了高速（上）

    摘要：集裝箱化集裝箱化集裝箱化以下是部分原因集裝箱化會(huì)迫使你遵從應(yīng)用開發(fā)大原則。通過集裝箱化，可以實(shí)現(xiàn)開發(fā)階段測(cè)試以及生產(chǎn)環(huán)境的對(duì)等。實(shí)現(xiàn)環(huán)境集裝箱化的理由還有很多很多，一旦掌握了基本知識(shí)，集裝箱化就不難實(shí)現(xiàn)。 一.前言 很多情況下，產(chǎn)品的設(shè)計(jì)與開發(fā)人員一直想打造一套高品質(zhì)的解決方案，從而快速、平穩(wěn)地適應(yīng)產(chǎn)品迭代。速度是衡量產(chǎn)品適應(yīng)性的真正且唯一的標(biāo)準(zhǔn)，而且，這并不是筆者的一家之言。 「速度...

    魏憲會(huì) 評(píng)論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請(qǐng)求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評(píng)論0 收藏0

  • vue項(xiàng)目打包后怎樣優(yōu)雅的解決跨域

    摘要：結(jié)語因?yàn)楣镜那昂蠖隧?xiàng)目通常都放在同一臺(tái)服務(wù)器，或者不在同一臺(tái)服務(wù)器的時(shí)候跨域也是靠后端的同志們?nèi)ソ鉀Q的，所以很少在生產(chǎn)環(huán)境中靠前端解決跨域的這項(xiàng)需求。 前言 在使用vue.js開發(fā)前端項(xiàng)目時(shí)，再結(jié)合webpack搞起各種依賴、各種插件進(jìn)行開發(fā)，無疑給前端開發(fā)帶來了很多便捷，就在解決跨域這個(gè)問題上，相信眾多用vue.js的前端同僚們同我一樣嘗到了甜頭，開發(fā)環(huán)境全靠proxyTable一...

    nanchen2251 評(píng)論0 收藏0

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁面適配—...

    Clect 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<