VS Code 中的实时服务器显示列表目录而不是 React 应用程序

Question

我是 React 新手，目前正在使用 create-react-app 和 node/npm 跟踪代码。我已经好几个星期没有遇到任何问题了，但今天当我从 App.js 中选择“上线”时，它会显示一个列表目录。如果我从index.html 上线，我会看到一个白屏。我看过其他解决方案，但我要么不理解它们，要么不起作用。

这些是目录中的项目：

构建

节点模块

公开

来源

package-lock.json

package.json

自述文件.md

我尝试使用index.html和app.js上线。我已经确保 npm 已更新。我已确保工作区中除了 index.html 或 app.js 之外没有打开任何内容。

Answer 1

当您应该在“build”文件夹中运行该文件时，您可能正在“public”文件夹中运行index.html 文件。在 VSCode 中，在“build”文件夹中找到 index.html 文件并右键单击它，然后选择“使用实时服务器打开”。

但我不得不问你为什么使用实时服务器扩展而不是使用与 create-react-app 捆绑在一起的 webpack-dev-server ？在生产版本中运行实时服务器是没有意义的，这违背了拥有实时服务器的初衷。您应该做的是使用开发服务器。从终端转到项目的根目录（package.json 文件所在的目录）并运行此命令

npm start

，这将启动您的开发服务器并在默认浏览器中打开一个选项卡，地址为“http:// /本地主机:3000"。