关于使用Vue打包前后网页表现成两个鸟样子的问题记录

【缘由】

今天接到反馈，说现场的网页打包部署后样式极其混乱，不堪入目，然而在dev模式下启动项目调试时却安然无恙，症状仅发生在打包发布后。经过一番折腾得知，发生此问题的原因可能是打包机制的问题。

【原因】

如果你在.vue代码中有使用类似<style src="xxx" scoped></style>的方式将样式代码外置，那么在打包时就有可能会发生类似上述的问题。分析原因可能是这种外置的 style 样式会被集中压缩处理，从而在处理过程中，因文件重名而互相挤压和反复覆盖代码，最终导致样式错乱。

【解决方案】

如果你的项目正遭受这种现象的折磨，那么请修缮源代码，将外置的<style src="xxx" scoped></style>文件全部内嵌在引用他们的.vue文件中，类似<style scoped>...</style>，然后重新打包发布。这虽然使你的代码看上去略显笨重，但确实有效。
或者你也可以选择将所有这些外置的样式文件全部重命名并更新引用代码，保证这些文件不会重名。

【症状预防】

• 如果一定要外置这些样式文件的话那么需要你确保这些外置的文件不会重名。那么就可以选择将这些文件集中管理到同一目录下，以方便同名检测。
• 或者干脆放弃优雅的代码可视感，全部集中在一起。

我个人比较倾向于选择样式代码外置，这样可以有效提高代码可读性。但是又不得不注意文件重名的问题。因此在目录划分时，我觉得有必要给每个模块放一个集中管理页面样式文件的目录。