无涯教程网

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

发布于08月16日

复制的步骤

我已经用webpack模板从vue-cli启动了应用程序.我在Chrome 65.0.3325.146上运行它，但它也存在于64.X.XXX版本上.

我在这里补充:

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

人们期待什么？

该应用程序应该可以与Chrome浏览器配合使用，我应该能够在Chrome开发工具中禁用/更改样式.

到底发生了什么？

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

我的同事们也有这个问题，所以它让我相信这不是我的本地bug，而是Vue方面更大的问题.还可以找到一些关于这个bug的问题，比如Page styles break when I change styles in Chrome DevTools with Webpack HMR个

提前谢谢.

顺致敬意，

推荐答案

I find another solution.感谢@munstrocity关于将cheap-module-eval-source-map改为eval-source-map的回复.不幸的是，Chrome开发工具中出现了didn't fix for me my styles个这样的变化，但这给了我一个很好的证明.

经过一段时间后，我发现将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.js相关问答推荐

Vue 3使用计算(computed)属性对象获取图像信息，在模板中呈现值时变为NaN

Nuxt3-Vue中的useRoute和useRouter有什么区别

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试？

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

VueJS：如何在组件数据属性中引用 this.$store

Vuex store 在 Nuxt 的什么地方

VueJS：向左，元素的顶部位置？

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径？

VueJS 将 HTML 打印到页面

为什么 vue 文档说 refs 不是响应式的，而实际上它们是响应式的

我可以在 Vue 实例方法中传播的 mapMutations 中使用this吗？

在Vue.js中从父组件执行子方法

如何在 Vue 类组件中定义过滤器？

Vue 动态组件事件绑定

Vue-i18n '无法读取 Proxy.Vue.$t 处未定义的属性 '_t'

vue-cli-service build --target lib 导入为 lib 时丢失图像路径

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

依赖关系甚至在 package.json 和 node_modules 中都没有定义

使用 Vuetify 的可滚动数据表

居中 v-toolbar-title

实用课程推荐

相关教程推荐