vue项目webpack打包，把代码打错了，而且仅仅是部分代码错误？

Question

如题详述：

碰到如此奇葩问题（真的很奇葩），我也是醉了！！！

问题出在：

项目打包前的本地调试： 一切正常，两个路由页面的切换，不同的背景图片能跟随切换

项目打包后： 用本地服务器打开项目， 两个路由页面切换，的确是切换了（因为切换时，两个不同页面的文本切换了），可是两个页面的一张背景图片却没切换（两个页面都有一张不同的背景图）**。打开开发者工具，两个页面切换，在element发现文本都变化了，唯独背景图片的url不变。所以深深怀疑，是webpack打包时把代码打错了，而且是部分错误。我彻底醉了

刚才发现区别了： 因为这两个页面的渲染，都是引入了一个相同的HTML组件，只是不同的视图页面动态渲染数据。但是这个跟什么有关呢？怎么去解决了？

你说是否极其奇葩，连个找问题的规律都不给？

碰到如此问题，我也是无辙了，期待见多识广的你多多支支招，静候您的佳音......

Answer 1

自解所提问题：
虽然解决根源在于<style scoped>的scoped属性，但是即使了解它的相关特性，还是有点解释不了

（1）加了scoped属性的组件，可以维护当前组件样式不受其它组件影响

（2）加了scoped属性的父级组件，不能修改子组件元素样式（无路子组件加没属性scoped，因为scoped只能维护当前组件元素）

（3）不加scoped属性的父级组件，可以修改子组件样式

（4）加了scoped属性的父级组件，也可以强行控制加了scoped属性的子组件，方法是：.a >>> .b或者css预处理中的 .a /deep/

虽然上述三条都是对的，但是不合理之处就在第三条解释不了的情形

问题：三个内容不同的父级组件（没加scoped属性），都应用了相同的子组件模板，并用父级内容填充子组件模板。

可是，三个不同父级组件都给子组件同一元素设置不同样式，首次在三个父级组件切换，样式正常；但是第二轮再切换，就不正常了，同一元素样式不随切换改变，而是用的第一轮切换最后样式，无论后面切换了多少轮，都不再变.

因为上面这个奇葩问题，最终也就是选择了（4）条解决的