Metro Bundler浏览器未显示UI仅展示JSON问题求助

问题现象 #

• 在终端输入w打开Web界面时，浏览器直接打开19006端口的应用，而非Metro Bundler界面
• 访问http://localhost:19000时，页面仅返回项目配置JSON（内容如下）：

{"name":"project","slug":"project","version":"1.0.0","orientation":"portrait","icon":"./assets/icon.png","userInterfaceStyle":"light","splash":{"image":"./assets/splash.png","resizeMode":"contain","backgroundColor":"#ffffff","imageUrl":"http://127.0.0.1:19000/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"assetBundlePatterns":["**/*"],"ios":{"supportsTablet":true},"android":{"adaptiveIcon":{"foregroundImage":"./assets/adaptive-icon.png","backgroundColor":"#FFFFFF","foregroundImageUrl":"http://127.0.0.1:19000/assets/./assets/adaptive-icon.png"}},"web":{"favicon":"./assets/favicon.png"},"_internal":{"isDebug":false,"projectRoot":"/Users/me/Documents/projects/project","dynamicConfigPath":null,"staticConfigPath":"/Users/me/Documents/projects/project/app.json","packageJsonPath":"/Users/me/Documents/projects/project/package.json"},"sdkVersion":"45.0.0","platforms":["ios","android","web"],"developer":{"tool":"expo-cli","projectRoot":"/Users/me/Documents/projects/project"},"packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":null,"https":false},"mainModuleName":"node_modules/expo/AppEntry","__flipperHack":"React Native packager is running","debuggerHost":"127.0.0.1:19000","logUrl":"http://127.0.0.1:19000/logs","hostUri":"127.0.0.1:19000","bundleUrl":"http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false","iconUrl":"http://127.0.0.1:19000/assets/./assets/icon.png","id":"@anonymous/project-bc40e47a-ee01-4104-9895-13fa07b1c8f4"}

• 应用可正常在浏览器和模拟器运行，仅Metro Bundler UI无法正常加载

环境信息 #

• 系统：Mac OS
• Expo CLI版本：6.0.1（全局通过Yarn安装）
• Node版本：16.16.0

已尝试的解决方法 #

• 卸载重装Expo CLI，先后切换Node 18.x.y和16.16.0版本测试
• 删除项目node_modules中的metro文件夹后，用Yarn重装所有依赖

解决思路 #

1. 清除缓存重启项目
   启动项目时添加--clear参数清除缓存：expo start --clear，缓存堆积可能导致UI资源无法正确加载
2. 验证Metro UI入口路径
   尝试访问http://localhost:19000/debugger-ui，部分版本的Metro Bundler UI入口已变更为此路径，而非根路径
3. 检查端口占用
   执行lsof -i :19000查看19000端口是否被其他进程占用，若有冲突则杀掉对应进程后重启Expo
4. 降级Expo CLI版本
   Expo 6.x部分版本可能存在Metro UI兼容问题，尝试降级到5.x稳定版本：yarn global add expo-cli@5.4.12，再重新启动项目测试
5. 检查自定义metro配置
   若项目存在metro.config.js自定义配置，临时移除该文件，使用默认配置测试，确认是否是配置屏蔽了UI路由
6. 禁用浏览器缓存
   在浏览器开发者工具中勾选「禁用缓存」选项，刷新http://localhost:19000，避免旧缓存导致UI无法加载

内容的提问来源于stack exchange，提问作者Gérald