解决vue vite启动项目报错ERROR: Unexpected “\x88“ in JSON 的问题

如果你在使用vue vite启动项目时遇到了JSON解析异常，有可能是因为项目依赖项中某个文件含有非utf-8编码的字符而导致的。

解决此问题的方法如下：

1. 在项目的根路径下创建vite.config.js文件，如果该文件已存在则直接修改它，如果没有请参照以下示例内容创建该文件。

const { createServer } = require("vite");

// 导出一个 vite 插件对象
module.exports = {
  configureServer: async ({ app, watcher }) => {
    // 添加预处理钩子，用于在服务启动前进行处理
    watcher.add("**/*.jsx").on("change", async (path) => {
      const content = await fs.promises.readFile(path, "binary");
      const utf8Content = iconv.decode(Buffer.from(content, "binary"), "utf8");
      await fs.promises.writeFile(path, utf8Content);
    });
  },
};

如上配置文件示例所示，我们导出了一个 configureServer 方法，该方法中，watcher.add("**/*.jsx") CRUD 自动为我们监听指定文件类型的变更，每次有文件变更时，都会执行一个回调函数。回调函数的作用是将文件内容从某种二进制编码（比如gbk）转为utf-8，并写回到原始文件。

1. 在该项目中安装iconv-lite依赖项，是一个纯JavaScript实现的「字符集编解码库」，用于将一种编码格式转换为另一种编码格式。安装方式，直接在终端或控制台输入以下命令：

yarn add iconv-lite

1. 遗憾的是，我们无法很方便地得知哪些文件是导致项目启动失败的罪魁祸首，因此只能基于经验或借助第三方工具寻找准确的文件。

比如说，你可能会遇到src目录下的某些.vue 文件非utf-8编码，或者某些json等文件非utf-8编码，这些文件都有可能导致ERROR: Unexpected “\x88“ in JSON 的问题。具体的筛查流程可以参考一些常见的编辑器，如VS code，在文件下拉框中提供了文件编码格式的选择，你可以尝试查看一下报错文件的编码方式是否错误。

1. 找到导致问题的文件后，根据第一步编写的代码解决问题，即修改该文件的编码组成，并写回到原文件。

总结：

通过上述步骤，我们可以解决vue-vite启动项目时遇到Unexpected “\x88“ in JSON 的问题。其中核心方案是通过vite的钩子机制，监听某种文件类型变更，然后自动将该文件的编码转换为utf-8，以期达到项目能正常启动的目的。当然，如果你的项目一开始就是utf-8编码，那么你可以跳过整个过程，直接启动项目。