Vue.js（Webpack模板）应用在Chrome DevTools实时改样式时页面样式崩溃

我之前也碰到过类似的情况，结合你的场景（vue-cli Webpack模板初始化项目，Chrome 64/65版本）来看，这个问题基本是CSS Source Map配置缺失或不正确导致的——没有正确生成Source Map的话，Chrome DevTools没法把编译后的样式关联回你的原始代码，自然就没法禁用或修改样式了。

先再明确下你的问题场景：

• 操作步骤：用vue-cli的Webpack模板初始化应用
• 异常环境：Chrome 65.0.3325.146及64.x系列版本
• 异常表现：应用能正常运行，但DevTools无法禁用/修改样式
• 预期：应用正常运行，DevTools可正常操作样式

下面是具体的解决步骤：

1. 检查并启用CSS相关的Source Map配置 #

打开项目里的webpack.base.conf.js，找到CSS和Vue文件的处理规则，确保开启sourceMap选项：

针对Vue单文件组件的配置 #

在vue-loader的选项里添加cssSourceMap: true：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          },
          // 启用Vue组件内的CSS Source Map
          cssSourceMap: true
        }
      },
      // 其他规则...
    ]
  },
  // 其他配置...
}

针对独立CSS文件的配置 #

如果项目里有单独的.css文件，要确保css-loader开启sourceMap：

{
  test: /\.css$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: {
        // 开启CSS文件的Source Map
        sourceMap: true
      }
    }
  ]
}

2. 确认开发环境的Source Map全局配置 #

打开config/index.js（vue-cli模板默认有这个配置文件），检查开发环境的devtool设置：

module.exports = {
  dev: {
    // 其他配置...
    // 这个devtool配置适合开发环境，能生成完整且高效的Source Map
    devtool: 'cheap-module-eval-source-map',
    // 其他配置...
  }
}

注意：别在开发环境用生产模式的devtool（比如hidden-source-map这类压缩型配置），会导致Source Map不完整。

3. 清除缓存并重启服务 #

修改配置后，记得：

• 删除项目根目录下的node_modules/.cache文件夹（如果存在），清除Webpack缓存
• 重启本地开发服务：执行npm run dev重新启动项目

4. 验证Chrome DevTools的设置 #

最后打开Chrome DevTools，确认两个关键设置：

• 点击右上角齿轮图标进入Settings，勾选Enable CSS source maps和Enable JavaScript source maps
• 切换到Elements面板，查看样式区域的Sources标签，确认能看到原始的文件路径

完成这些步骤后，应该就能正常在DevTools里禁用或修改样式了。

内容的提问来源于stack exchange，提问作者Marcin