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

Posted 2023-02-22

【中文标题】在 Chrome DevTools 中实时更改时破坏了 Vue.js 应用程序（Webpack 模板）的页面样式

【英文标题】：Broke page styles of Vue.js app (Webpack template) when live changing it in Chrome DevTools

【发布时间】：2018-08-28 14:07:45

【问题描述】：

重现步骤

我使用webpack 模板从vue-cli 引导应用程序。我在 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 方面更大的问题。还可以找到有关此错误的一些问题，例如Page styles break when I change styles in Chrome DevTools with Webpack HMR

提前致谢。

最好的问候， 马辛

【问题讨论】：

这是否应该作为错误提交给 Chromium？

@SeanLarkin 可能是的，但现在我只在vue-cli 的webpack 模板上构建的Vue.js 检测到了这个问题。所以它也可能在这个模板/Vue 端。我问是因为这个事实，也许有人也在与这个问题作斗争。

【参考方案1】：

我也遇到过这个问题，我可以通过在开发中禁用 CSS 源映射来防止这种情况。我仍在研究为什么这只发生在 Chrome 上，但至少我们可以开始寻找那里。我不认为这是 Webpack 问题。

-- 更新了--

我只是在我的 config/index.js 文件中将 devtool 更改为“eval-source-map”，一切正常。

file: config/index.js

...
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map'
...

【参考方案2】：

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

我发现，在config/index.js 中将cacheBusting: true, 更改为false 有助于解决这个问题，现在可以在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,
...

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

【讨论】：

最新的 Vue Cli 版本是否有同样的问题？

@JesúsFuentes 我没有检查它，你能提供你的意思是什么版本吗？有空我可以试试:)

最后一个，v3.8.2。谢谢。

我们也遇到了这个问题 - 无法在 Chrome 调试器中编辑样式而不丢失所有样式。但是，在我们的 Vue CLI 应用程序中，我们没有 config 文件夹，更不用说 index.js 文件了。是否应该添加？在最高层？在 src 文件夹里面？

【参考方案3】：

我遇到了这个问题，但只有当我在一个组件中有多个块时。

例如，

<style scoped>
...
</style>

<style>
...
</style>

我无法找出确切的原因，但我注意到我可以看到 sources devtools 选项卡只显示一个内联样式块，所以我认为那里有一些脆弱的诡计。我的快速解决方法是简单地将至少一个样式块移动到它自己的文件中。

<style scoped>
...
</style>

<style src="./my-component.unscoped.css"></style>

我不知道为什么会这样。希望它可以帮助某人。

【讨论】：

谢谢詹姆斯，它做到了！ :) 请问这些样式表是否是在您的情况下用任何预处理器编写的？对我来说，它是手写笔。

是的，我正在为我的样式表使用 scss，但只是没有在我的代码示例中包含它 - 让我的答案更通用

【参考方案4】：

在您的 webpack 配置文件中，您可以尝试为您的 sass 加载器配置启用源映射。

您需要按如下方式编辑您的文件：

module.exports = 
    css: 
        loaderOptions: 
            sass: 
                sourceMap: true
            
        
    

【讨论】：

这为我修复了它。谢谢！！

对我来说，这修复了它，但设置为 sourceMap: false!

有人知道如何在 Gridsome 中做到这一点吗？在 gridsome.config.js 文件中合并这个配置只会破坏 devServer