Vue.js项目组件文件VSCode打开报错乱码无法编译，如何恢复？

我正在开发一个Vue.js项目，今日早晨打开项目时发现无法正常编译，报错指向其中一个组件文件。在VSCode编辑器中打开该组件时弹出提示："The file will not be displayed in the editor because it is either binary, very large or uses an unsupported text encoding."，点击「仍然打开」后出现大量带奇怪符号的乱码。我尝试用其他编辑器打开该文件，同样出现乱码问题，仅显示的符号样式有差异。想咨询该问题的诱因是什么，是否有方法可以恢复该文件的正常内容？

故障参考图：

• 编码识别/写入错误：IDE保存异常、进程崩溃时强制写入了错误的编码格式头，或者编码识别逻辑出错，把正常的文本识别为二进制格式
• 文件字节损坏：磁盘坏道、异常断电、云盘同步冲突、Git合并错误等场景下，文件的部分字节被改写为二进制乱码，导致所有编辑器都无法正常解析为文本
• 意外写入覆盖：运行的本地脚本、自动化部署工具等意外将二进制内容写入到了该组件文件中，直接覆盖了原本的文本内容

• 先确认是否为编码识别错误：在VSCode右下角点击编码显示栏，选择「通过编码重新打开」，依次尝试UTF-8、GBK、UTF-16 LE、UTF-16 BE等常见编码，排除识别错误的可能性
• 版本控制系统恢复：如果项目接入了Git等版本管理工具，直接执行命令git checkout <损坏文件的相对路径>，即可恢复到最近一次提交的正常版本，这是成功率最高的恢复方案
• 本地历史备份恢复：可以查找VSCode的本地文件历史（右键文件标签页选择「浏览本地历史」）、系统的文件历史记录、云盘备份快照等，找回近期的正常文件版本
• 代码片段提取：如果没有备份，可以用支持二进制读取的文本工具打开文件，过滤掉无法识别的乱码块，提取可正常识别的Vue代码片段，降低重写的工作量

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