20251112-问题排查与复盘

1. 图片无法显示：

问题描述：

在使用 <img> 标签绑定图片时，图片没有正确显示，尽管路径和格式看起来正确。

解决方案：

• 未正确注册 data 中的路径变量：图片路径没有注册为响应式数据，导致无法渲染。

• 解决步骤：

  1. 在 data() 中注册图片路径：

     import userTotal from "@/assets/bg/userTotal.webp"; // 确保导入路径正确
     export default {
       data() {
         return {
           userTotal: userTotal // 注册路径
         };
       },
     }

  2. 在模板中绑定图片：

     <img :src="userTotal" alt="用户总数" class="user-total-img" />

• 注意 ：检查构建工具配置（如 Vite 或 Webpack），确保图片路径别名（@/assets）能正确解析。

---

2. Vue 的警告：

问题描述：

在 Vue 项目中，控制台出现了警告信息：

[Vue warn]: Extraneous non-props event listeners (goPublish) were passed to <Deploy> but could not be automatically inherited because component renders text nodes.

解决方案：

• 警告原因 ：Vue 提示你传递了未声明的事件 goPublish。该事件没有被正确处理。

• 解决步骤：

  1. 确保组件 Deploy 中正确定义了 goPublish 事件：

     export default {
       props: ['goPublish'], // 确保事件传递和监听
     }

  2. 使用 $emit() 来触发父组件的事件：

     <button @click="$emit('goPublish')">发布</button>

---

3. ReferenceError: require is not defined：

问题描述：

在执行某些 Node.js 或 Vue 代码时，出现错误：

ReferenceError: require is not defined

解决方案：

• 错误原因 ：该错误通常是由于在浏览器环境中使用了 Node.js 中的 require 方法，浏览器不支持 require。

• 解决步骤：

  1. 使用 import 代替 require：

     import userTotal from '@/assets/bg/userTotal.webp'; // 适应 ES 模块导入

  2. 检查构建工具配置，确保模块转换正确。

  注意 ：如果你在浏览器环境中运行代码，请确保没有直接使用 Node.js 的特性（如 require、module.exports 等）。所有模块应使用 import/export 语法。

---

4. 滚动条样式问题：

问题描述：

在应用中，滚动条样式不符合预期，可能需要隐藏或者自定义滚动条样式。

解决方案：

• 隐藏滚动条：使用 CSS 可以隐藏滚动条，或者设置其样式。

• 解决步骤：

  .base-div {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .base-div::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

• 设置滚动条样式 ：若想定制滚动条样式，可以使用 ::-webkit-scrollbar 系列的 CSS 伪元素：

  .base-div::-webkit-scrollbar {
    width: 8px;
  }
  .base-div::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
  }

---

5. 图表显示问题（ECharts） ：

问题描述：

在使用 ECharts 渲染图表时，图表的数据显示不正确或者未显示。

解决方案：

• 解决步骤：

  1. 确保图表的 option 配置正确，并传递给 <scEcharts /> 组件。
  2. 检查 ECharts 配置是否完整，特别是 xAxis 和 yAxis 的配置。
  3. 确保数据来源无误，可以通过 console.log() 打印数据，查看其是否已正确返回。

  代码示例：

  this.userOption = {
    title: {
      text: "用户总数",
    },
    xAxis: {
      type: "category",
      data: ["2021-01", "2021-02", "2021-03"],  // 示例数据
    },
    series: [
      {
        data: [5, 20, 36],
        type: "line",
      },
    ],
  };

---

总结

今天解决了以下几个问题：

1. 图片无法显示：通过注册数据并确保路径正确来解决。
2. Vue 警告 ：解决了未声明事件的警告，使用 emit 触发自定义事件。
3. require 错误 ：更改为 import 语法，以适应浏览器环境。
4. 滚动条样式：使用 CSS 自定义滚动条样式或隐藏滚动条。
5. ECharts 配置问题 ：确保图表的 option 配置正确并传递到组件中。