鍍金池/ 問答/HTML/ vue項(xiàng)目webpack打包，把代碼打錯(cuò)了，而且僅僅是部分代碼錯(cuò)誤？

vue項(xiàng)目webpack打包，把代碼打錯(cuò)了，而且僅僅是部分代碼錯(cuò)誤？

如題詳述：

碰到如此奇葩問題（真的很奇葩），我也是醉了！?。?/p>

問題出在：

項(xiàng)目打包前的本地調(diào)試： 一切正常，兩個(gè)路由頁面的切換，不同的背景圖片能跟隨切換

項(xiàng)目打包后： 用本地服務(wù)器打開項(xiàng)目， 兩個(gè)路由頁面切換，的確是切換了（因?yàn)榍袚Q時(shí)，兩個(gè)不同頁面的文本切換了），可是兩個(gè)頁面的一張背景圖片卻沒切換（兩個(gè)頁面都有一張不同的背景圖）**。打開開發(fā)者工具，兩個(gè)頁面切換，在element發(fā)現(xiàn)文本都變化了，唯獨(dú)背景圖片的url不變。所以深深懷疑，是webpack打包時(shí)把代碼打錯(cuò)了，而且是部分錯(cuò)誤。我徹底醉了

剛才發(fā)現(xiàn)區(qū)別了： 因?yàn)檫@兩個(gè)頁面的渲染，都是引入了一個(gè)相同的HTML組件，只是不同的視圖頁面動(dòng)態(tài)渲染數(shù)據(jù)。但是這個(gè)跟什么有關(guān)呢？怎么去解決了？

你說是否極其奇葩，連個(gè)找問題的規(guī)律都不給？

碰到如此問題，我也是無轍了，期待見多識(shí)廣的你多多支支招，靜候您的佳音......

回答
編輯回答
幼梔

自解所提問題：
雖然解決根源在于<style scoped>的scoped屬性，但是即使了解它的相關(guān)特性，還是有點(diǎn)解釋不了

（1）加了scoped屬性的組件，可以維護(hù)當(dāng)前組件樣式不受其它組件影響

（2）加了scoped屬性的父級(jí)組件，不能修改子組件元素樣式（無路子組件加沒屬性scoped，因?yàn)閟coped只能維護(hù)當(dāng)前組件元素）

（3）不加scoped屬性的父級(jí)組件，可以修改子組件樣式

（4）加了scoped屬性的父級(jí)組件，也可以強(qiáng)行控制加了scoped屬性的子組件，方法是：.a >>> .b或者css預(yù)處理中的 .a /deep/

雖然上述三條都是對(duì)的，但是不合理之處就在第三條解釋不了的情形

問題：三個(gè)內(nèi)容不同的父級(jí)組件（沒加scoped屬性），都應(yīng)用了相同的子組件模板，并用父級(jí)內(nèi)容填充子組件模板。

可是，三個(gè)不同父級(jí)組件都給子組件同一元素設(shè)置不同樣式，首次在三個(gè)父級(jí)組件切換，樣式正常；但是第二輪再切換，就不正常了，同一元素樣式不隨切換改變，而是用的第一輪切換最后樣式，無論后面切換了多少輪，都不再變.

因?yàn)樯厦孢@個(gè)奇葩問題，最終也就是選擇了（4）條解決的

2017年3月10日 23:05