一个努力学习的程序猿

在最近的一次 VitePress 文档中心 开发过后，在打包时发生了三次报错，而每个报错通过查阅资料都能找到相关解决方案，现将遇到的问题汇总总结如下。如果大家也有相同的问题，希望能帮助到各位。本文无任何其他用途，仅用作作者自己总结。

（1）实现 Vue 前端组装一个 Form-Data 类型入参并解决 415 状态码问题；（2）解决如何根据文件路径转换成 File 文件对象，再拼接进 Form-Data 入参；（3）使用 ElementUI el-upload 组件，实现手动上传文件，并拼接进 Form-Data 入参。

Vue 项目使用 InfiniteScroll 无限滚动组件在部分浏览器失效，转而使用 JS 去实现无限滚动及其相关问题的解决方案

el-upload 的单图片、图片墙使用和遇到的坑

首先先叙述一下需求和遇到的问题：需求：在这个页面里，我需要去判断查询条件，从而在不同的条件下，展示不同的表格数据，即在不同情况下，展示不同的表格或者说表格的数据列，从而在不同的条件下看到不同的表格数据。但是问题也就在这里意外的出现了。问题复现：（1）第一种情况下的表格是这样的：第四列为 expand，展现没有问题。（2）现在切换到第二种情况下的表格是这样的：第六列为 expand，没问题。但是，问题就在这里出现了。第四列我是没把它设置成 expand 的。此时我看了一下代码，确定本列确

相信各位在学习和使用 Vue 进行开发的过程中，或多或少可能见到过或遇到过这样的报错：问题出现的原因很简单：就是某个标签没有被成功导入。问题的解决方案也很简单，网上一搜就会有很多解决方法，比如：（1）第一步：先确保 Vue 项目里 components 、import 、组件标签 的写法没有问题，排除这样的因素：书写问题 （请一定要确保书写没问题，我看网上还有把 components 写在 data 里的，硬说自己写法没问题的）（2）第二步：如果你不是 Vue 项目，而是直接在 HTML 里导入

今天在开发过程中，遇到了一个有点棘手的问题。棘手的原因是，我搜索了一圈，结果没发现解决方案，甚至没看到几个遇到相同问题的朋友。这让我感到十分疑惑，作为一个 CV 程序员，难道是我参照文档用的方法不对？竟然还有百度找不到的解决方案？那没办法了，用自己的一根头发作为代价，自己进行摸索吧。问题如下：在使用 ElementUI 的 el-table 时，当我为其设置了一个 max-height 后，如果数据量过大，确实超过了给定的高度，那么用起来和文档还真就是一个效果。但是当这组数据，在没超过 max-heig

首先，在选用 ElementUI 关于时间的选择器时，通常会设置 今天之后的时间不可选 或者 今天之前的时间不可选 等其他关于时间限制的需求。那么参考相关文章和官方文档之后，我们可以知道，我们需要使用 picker-options 里的 disabledDate 去对其进行限制。在这里，参考的文章如下：【ElementUI】日期选择器时间选择范围限制，根据接口灵活设置可选时间。只能选今天之前的时间，或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期但是！同样的一句话，咋就遇到问

话不多说，直接上报错：这个报错看起来可太眼熟了。在网上一搜，大致的解决方案是：1、记一次vue history模式下的报错ChunkLoadError: Loading chunk xx failed net::ERR_ABORTED 404 (Not Found)解决方案2、Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案照着一做，history、publicPath、onError，甚至还有扯到上线服务器的，任你有什么解决方案，到我这里统统

今天在工作中，使用了 AntV 旗下的图编辑引擎 X6 来实现功能。该组件库提供了一系列开箱即用的交互组件和简单易用的定点节制能力，方便我们快速搭建流程图、DAG 图、ER 图等。但是在使用时，遇到了Error: Ensure the container of the graph is specified and valid 报错问题：对这个错误进行分析可以发现，错误原因是在 mounted 生命周期时，id 为 container 的 div 还没有被挂载到页面中。这就导致我们想要将 graph 绘制

相关文章：ECharts官网在Vue项目中使用ECharts最近在工作中需要使用ECharts绘制图表，所以根据参考文档尝试了一番，遇到了图表不显示的问题。后来参考了网上许多解决方案，最终发现，原来是因为自己没给图表组件设置height。现记录如下：<ability-line style="width:100%;height:300px;"></ability-line>ability-line不是ECharts封装组件，是自己编写的组件，需要使用imports导入

问题如下：解决方案：<style scoped> .box /deep/ .el-range-separator{ width: 20px !important; }</style>

最近加入到公司项目里，最开始的时候手足无措，不知道该如何从项目里拉取代码，不知道该如何修改分支，不知道该如何提交代码，网上也没有这样的一个流程教学，并且更多的是使用Git Bash，对于不了解Git代码的小白，就更不敢在其中做操作了，生怕把之前大佬们提交的代码全部删除…因此这里记录一下，我接触到的实现流程，用idea来实现git操作，比较简单。笔者在最开始的时候，公司就提供了相关VPN等办公用具，然后把我拉进到了相关项目里，那么这部分内容就不说了，以下内容就从能够进入到某项目页面后说起。首先，在项.

在项目中遇到了一个相关需求：一个页面中为了能够使代码更加简洁和易于查看，将其分成了多个功能模块。此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改。此时考虑到Vue项目中的数据通信方式：可能还是使用上述的 方式1 + 方式2 是最易于理解和简单的。使用方式1传递数据给子组件，如果子组件需要对其进行修改，使用方式2。但是使用props通信的时候，最关键的问题就是子组件虽然能够接收到父组件传递过来的数据，但是无法对其进行修改。如果修改会出现下面的报错信息：此时通过参考资料，总结出了下面的

相关文章：node-sass 安装失败的各种坑在项目中需要使用sass，此时在安装node-sass时，遇到了报错信息。和同事参考了大量解决方案后无果。最终经过对报错信息的分析，选择降低nodejs版本进行尝试，最终解决问题。问题如下：（1）直接在项目中使用 npm install 时报错，部分报错信息如下：（2）为排除网络原因选择使用 cnpm。使用 cnpm 后仍然报错。部分报错信息如下：（3）除此以外，参考了文章顶部的相关文章中的方案，最终无法解决问题。最后发现原因是因为node版

问题如下：在使用el-dialog时，会自带有遮盖层，此时可能会出现弹出框被遮盖层挡住的情况。解决方案如下：在el-dialog标签里添加 :modal-append-to-body=‘false’。问题解决。

在项目中使用ElementUI的el-autocomplete时，参照了官方文档的代码，结果发现无法使用。现在通过对代码进行调整，总结如下：ElementUI中，el-autocomplete组件是一个拥有输入建议的输入框。该组件的基础用法如下：<el-autocomplete v-model="newGroupId" class="inline-input" :fetch-suggestions="queryGroupId" placeholder="请输入用户组Id" st