在Chrome DevTools中实时更改时,破坏了Vue.js应用程序(Webpack模板)的页面样式

Question

重现步骤

我有vue-cli一个webpack模板引导的应用程序.我在Chrome上运行它,65.0.3325.146但它也存在于64.X.XXX版本上.

我在这里添加 package.json:: https://gist.github.com/marcinlesek/a7e6076ce4befe2e810743fdbaf81480

webpack.base.conf.js:https://gist.github.com/marcinlesek/80cbf27b6ef4172248709f32c257d0cd

有什么期待？

该应用程序应该适用于Chrome浏览器,我应该可以在Chrome开发工具中禁用/更改样式.

究竟发生了什么？

当我通过Chrome更改样式时,dev tools它破坏了所有样式(在更改或禁用一个属性之后),该页面看起来像纯HTML,没有任何样式代码行.新的开发工具设置和Chrome重新安装没有帮助.什么有点棘手,在Firefox上58.0.2一切正常.

---

我的同事也有这个问题,所以它让我相信这不是我的本地错误,而是Vue方面更大的东西.还可以找到一些有关此错误的问题,例如当我使用Webpack HMR更改Chrome DevTools中的样式时,页面样式会中断

提前致谢.

最好的问候,Marcin

Answer 1

我找到另一个解决方案。感谢 @munstrocity 关于更改cheap-module-eval-source-map为eval-source-map. 不幸的是，这一更改并没有修复我在 Chrome 开发工具中的样式，但给了我很好的检查点。

过了一会儿我发现，更改cacheBusting: true,为false有助于config/index.js解决这个问题，现在可以在 Chrome 开发工具中更改样式。

// file: config/index.js

...
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: false,
...

希望这对任何人都有帮助！:)