在 Vue + TypeScript + Element 联合打造简洁博客的过程中，我踩过的坑

<#>

1. TS Type 提示不准确

   问题：编辑代码时，类型提示不准确或存在报错。

   原因：类型提示可能因为 tsconfig.json 设置、组件属性变化、Props 类型变更、根组件重新定义等而失效或不准确。

   解决方法：

   1. 检查 tsconfig.json 的设置是否妥善；
   2. 修改组件中的 props 属性类型以匹配提示；
   3. 确保 Element 组件的 props 类型与相应 Vue 组件的属性类型相符；
   4. 如果进行过组件父节点拆分，重命名根组件时要确保其他组件 import 语句引用的是新的组件定义。

2. HTTP 500 错误

   问题：运行项目时出现 HTTP 500 错误。

   原因：HTTP 500 错误通常与 Node.js 服务端代码错误或运行环境配置有关系。

   解决方法：

   1. 检查 Node.js 代码是否出错或运行环境是否配置错误。
   2. 检查 node 版本是否匹配项目设置。
   3. 检查 nodemon 版本是否与 node 版本相匹配。
   4. 重启 npm 进程。
   5. 重启后端服务。

3. 静态文件根目录修改

   问题：在 package.json 的静态文件目录配置错误，导致项目静态文件无法正常引用。

   原因：文件根目录修改时，如果未更改 package.json 中的静态文件目录设置，则无法正常引用静态文件。

   解决方法：

   1. 正确配置静态文件根目录，修改 package.json 文件中的静态文件根目录配置。
   2. 正确配置好静态文件目录后，使用 npm run serve 进行构建。
   3. 正确配置好静态文件目录后，使用浏览器打开 http://localhost:5000/ 进行查验。

4. Element 样式失效

   问题：使用 Element 样式时部分样式失效。

   原因：使用 SASS/SCSS 预处理时，存在某个样式不生效，一般来说是 SASS 引用的文件与 Element 的预置文件有重叠和覆盖。

   解决方法：

   1. 检查 SASS 预处理文件，去掉可能与 Element 样式存在覆盖的样式。
   2. 在 CSS 中通过 Class 选择器来引入对应的样式。

5. 无法导入 TS 模块

   问题：尝试导入 TS 模块时出现错误。

   原因：编辑器智能提示/自动导入对导入 TS 模块不支持，会报出错误。

   解决方法：

   1. 安装类型定义声明文件。
   2. 检查要导入的 TS 模块是否提供声明文件。
   3. 正确使用类型定义导入代码。

6. 封装的 Element 组件未生效

   问题：使用 Element 封装的组件无效果，比如一些组件里弹窗一直弹出不来，或者有些组件样式是原来的 Element。

   原因：不同版本的 Element 兼容度有区别，有的 Element 组件虽然可以兼容，但兼容度不高，强行打包也不生效。

   解决方法：

   1. 确认自己的 Element 版本和打算使用的 Element 组件的版本兼容。
   2. 确认自己需要使用组件在 Element 中已经打包过。
   3. 查看目前使用版本的兼容性，或者尝试其他版本的兼容性。

<#>