执行npm run dev启动Vite项目报index.html解析错误如何解决？

1. 修复index.html语法错误 #

• 打开index.html文件，删除冗余的<body>标签，确保整个文件仅存在一对合法的<body></body>闭合标签，所有HTML标签嵌套符合语法规范
• 修复完成后重新执行npm run dev，确认终端指向标签的报错、Vite无法解析index.html的报错是否消失

2. 解决crbug/1173575报错 #

该报错为Chrome对非规范JS模块加载方式的废弃提示，通常由Vite资源解析异常触发，修复步骤：

• 打开Chrome开发者工具 > 「Application」面板 > 「Storage」分类 > 点击「Clear site data」清除站点缓存，同时在「Network」面板勾选「Disable cache」选项后刷新页面
• 删除项目根目录下的.vite缓存文件夹，重新执行npm run dev启动服务
• 检查index.html内的JS资源引入写法，所有业务JS模块必须使用<script type="module" src="你的main.js路径"></script>的规范写法

3. 排查RapidAPI接口无返回问题 #

确认页面基础报错全部修复后，按以下步骤排查接口问题：

• 打开Chrome开发者工具「Network」面板，查看爱情计算器接口的请求详情：确认请求URL、X-RapidAPI-Key、X-RapidAPI-Host两个必填请求头是否配置正确
• 检查是否存在跨域错误：如果接口返回CORS相关报错，需要在vite.config.js中配置代理规则，参考配置如下：

export default {
  server: {
    proxy: {
      '/rapidapi': {
        target: 'https://love-calculator.p.rapidapi.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/rapidapi/, '')
      }
    }
  }
}

配置完成后将main.js中的接口请求前缀修改为/rapidapi即可

• 在main.js的请求逻辑中添加错误捕获，打印异常信息确认请求失败原因，示例：

// 参考异步请求写法
try {
  const res = await fetch('你的请求地址', {
    headers: {
      'X-RapidAPI-Key': '你的Key',
      'X-RapidAPI-Host': 'love-calculator.p.rapidapi.com'
    }
  })
  const data = await res.json()
  console.log('接口返回数据：', data)
} catch (err) {
  console.error('请求异常：', err)
}

• 登录RapidAPI后台确认当前账号的接口调用配额是否用尽，接口状态是否正常

内容的提问来源于stack exchange，提问作者Chaz Carothers