为何Live Server扩展显示React项目文件夹而非在浏览器运行代码

首先明确问题根源：Live Server是静态资源服务器，默认会从配置的根目录下寻找index.html作为入口文件，如果找不到就会展示当前目录的文件夹列表。你运行npm run start时走的是React官方内置的开发服务器，会自动完成源码构建、入口挂载、路由适配等逻辑，和Live Server的运行逻辑完全不同，因此可以正常启动。

可根据你的使用场景选择对应解决方案：

• 场景1：需要用Live Server预览生产环境产物
  先在项目根目录终端执行npm run build命令，执行完成后项目会生成build文件夹，里面是打包后的全量静态资源，包含合法的入口index.html文件。右键点击build文件夹选择「Open with Live Server」即可正常访问项目。注意此模式下修改项目源码不会自动更新，每次修改都需要重新执行npm run build才能同步改动，仅适合生产构建结果的临时预览。
• 场景2：需要在开发阶段使用Live Server（不推荐）
  打开VS Code设置，搜索「Live Server: Root」配置项，将值改为你项目的public文件夹路径，React项目的原生入口index.html默认存放在此目录下。但要注意如果你的项目使用了BrowserRouter模式的前端路由，Live Server默认不支持前端路由重定向，刷新非根路径页面会出现404错误。

开发建议 #

React日常开发阶段直接使用npm run start启动官方内置的开发服务器即可，它自带热重载、前端路由适配、开发环境错误提示等专属功能，适配性远高于通用静态服务器Live Server。

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