确保index.html文件位于 Vite 项目的根目录中

TLDR：更改端口
对我来说，这是因为我已经有一些东西在Vite试图在（3000）上服务应用程序的端口上运行。
做了一个快速的lsof -nPi :3000（MacOSX），我看到我的Docker桌面正在那个端口上运行。
您可以通过在vite config（vite.config.js）中更新服务器密钥来静态地执行此操作

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8000
  }
})

或通过启动命令动态启动：vite --port 8000
https://vitejs.dev/config/#config-file

我也遇到过同样的问题，这和项目文件夹名有关。项目文件夹名中有一些空格。我删除了空格和node_module文件夹，然后重新安装了包，现在它工作正常。

以防万一有人在寻找解决方案，而其他答案都不起作用，这里是对我起作用的。
在vite.config.js中，我必须在服务器选项中将主机设置为“127.0.0.1”。

{
  server: {
    host: '127.0.0.1'
  }
}

默认值是localhost，但为什么不工作，我仍然不知道...

我有同样的问题，但没有使用端口3000，但无论如何，我将其更改为port 8000，它的工作

export default defineConfig({
  plugins: [react() tsconfigPaths()],
  server: {
    port: 8000
  }
});

这里的答案对我没有帮助。原来uBlock Origin在通过localhost:3000访问index.html页面时阻止了它的加载。禁用它或在匿名模式下尝试它都有效！

我遇到了同样的问题。单击折叠vscode中的项目结构，vite配置文件不在index.html级别。因此，请确保它应该在index.html所在的位置，请仔细检查！！