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

RdouTyping 發(fā)布于2019-08-29 15:07 / 4189人閱讀

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

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

上次提到作用域問題, 導致樣是不生效, 這次講的是我之前遇到的一個小坑, 稍不留神就完蛋.

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

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

問題現(xiàn)象

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

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

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

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

index.html中的css樣式

vant的base.css內容

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

App.vue的css內容

HelloWorld.vue的css內容

而生產(chǎn)出來的卻和這個不同, 因為被合并為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內容

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

2018年4月21日補充

今天因為考慮到Vant的中部分reset樣式并沒有較好的對頁面進行樣式統(tǒng)一, 因此引入normalize.css, 于是基于上面的測試, 現(xiàn)在擁有6塊style. 而normalize.css在兩種環(huán)境下的區(qū)別還是有的~

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

問題原因

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

解決方案

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

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

云服務器 GPU云服務器關于安卓開發(fā)環(huán)境問題生產(chǎn)環(huán)境測試環(huán)境測試環(huán)境生產(chǎn)環(huán)境測試環(huán)境與生產(chǎn)環(huán)境區(qū)別

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/113108.html

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

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

Pines_Cheng 2019-08-29 15:05 評論0 收藏0
JavaScript 踩坑心得— 為了高速（上）

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

魏憲會 2019-08-19 17:51 評論0 收藏0
前端相關大雜燴

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

fuyi501 2019-08-22 13:46 評論0 收藏0
vue項目打包后怎樣優(yōu)雅的解決跨域

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

nanchen2251 2019-07-25 14:46 評論0 收藏0
移動端布局與適配

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

Clect 2019-08-29 14:08 評論0 收藏0