VS Code中Live Server显示目录列表而非React应用的问题求助

• 别用Live Server启动React项目了，create-react-app自带专门的开发服务器，按以下步骤操作：

  1. 打开终端，定位到项目根目录（就是包含package.json的文件夹）
  2. 运行命令 npm start
  3. 等待几秒后，浏览器会自动加载你的React应用，而且修改代码后页面会自动刷新，开发体验比Live Server更适配React项目

• 为啥之前的操作会出问题？

  • App.js是React组件源码文件，不是可直接解析的HTML文件，Live Server识别不了，所以只能显示目录列表
  • public文件夹里的index.html是模板文件，开发环境下它依赖的React运行代码由官方开发服务器动态提供，直接用Live Server打开的话找不到这些资源，所以会出现白屏

• 要是非要用Live Server查看效果（不推荐开发阶段使用），需要先打包项目：

  1. 在终端运行 npm run build，项目会生成一个build文件夹
  2. 用Live Server打开build文件夹里的index.html，就能看到打包好的静态页面，但修改代码后需要重新打包才能更新内容

内容的提问来源于stack exchange，提问作者Emily Wells