国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[新手坑] 02.Vue開發環境和生產環境樣式不一致的問題

RdouTyping / 4003人閱讀

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

[新手坑] 02.Vue開發環境和生產環境樣式不一致的問題 
上次提到作用域問題, 導致樣是不生效, 這次講的是我之前遇到的一個小坑, 稍不留神就完蛋.

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

那么為什么會出現這個問題呢? 我下面來做些小的測試觀察一下.

問題現象

在開發環境下, 每個不同塊的style都會被多帶帶提取插入到頁面的head區域, 而生產出來的的文件是會被合并成一個文件, 在開發環境下, 這些style塊的順序又和生產環境編譯出來的css文件內的順序有差別, 導致我們在開發環境中, 使用了相同的優先級, 覆蓋原Vant的UI樣式看起來正常, 而在生產后, 順序錯誤導致失效了!

為了更加方便測試, 我在vue-cli-mobile-study項目創建了一個分支02-build-css-order, 有興趣可以看看~

本來想在不同塊的css中添加注釋以便于更明顯的觀察順序變化, 結果發現生產環境中的注釋被自動忽略了, 嘗試去掉cssnano插件執行, 發現還是有部分注釋沒有展示出來, 因為不是很重要, 所以沒有去糾結這塊.

開發環境中的head區域有效的style有5個. 分別是

index.html中的css樣式

vant的base.css內容

路徑為./vue-cli-mobile-study/src/assets/styles/_uireset.css內容

App.vue的css內容

HelloWorld.vue的css內容

而生產出來的卻和這個不同, 因為被合并為1個css文件了, 因此我們觀察單個css文件的上面4塊的順序

index.html中的css樣式

App.vue的css內容

HelloWorld.vue的css內容

vant的base.css內容

路徑為./vue-cli-mobile-study/src/assets/styles/_uireset.css內容

當然, 其實在有作用域的組件中所包含的樣式順序對項目是沒有影響的, 所以我們需要關注的是全局引入的樣式順序, 從上面的現象中可以看出, 除了核心文件index.html, 開發環境下, Vant樣式默認在最前面(Vant實際上是Babel那邊導入了), 而其他樣式則似乎根據main.js入口的順序, 以及渲染順序來添加到html頭部的; 而生產環境下, 相對詭異.

2018年4月21日補充 
今天因為考慮到Vant的中部分reset樣式并沒有較好的對頁面進行樣式統一, 因此引入normalize.css, 于是基于上面的測試, 現在擁有6塊style. 而normalize.css在兩種環境下的區別還是有的~

我將normalize.css直接寫入main.js的頂部進行import, 發現可以很好的將normalize.css內的樣式放在除了不可控制index.html內樣式之后的首位. 這樣就很棒棒了, 通常我們會將normalize.css和reset.css優先加載.

問題原因

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

解決方案

在需要覆蓋第三方組件的默認樣式是, 盡量使用高于第三方組件優先級的css樣式, 以免出現開發環境和生產環境效果不同的情況.

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113108.html

相關文章

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

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

    Pines_Cheng 評論0 收藏0

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

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

    魏憲會 評論0 收藏0

  • 前端相關大雜燴

    摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。 前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0

  • vue項目打包后怎樣優雅的解決跨域

    摘要：結語因為公司的前后端項目通常都放在同一臺服務器，或者不在同一臺服務器的時候跨域也是靠后端的同志們去解決的，所以很少在生產環境中靠前端解決跨域的這項需求。 前言 在使用vue.js開發前端項目時，再結合webpack搞起各種依賴、各種插件進行開發，無疑給前端開發帶來了很多便捷，就在解決跨域這個問題上，相信眾多用vue.js的前端同僚們同我一樣嘗到了甜頭，開發環境全靠proxyTable一...

    nanchen2251 評論0 收藏0

  • 移動端布局與適配

    摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包 騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。 移動端頁面適配—...

    Clect 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<