如何用Firebase模拟器托管React应用？解决URIError异常

核心问题分析 #

URIError: URI malformed 通常是路径解析异常导致的，结合你的情况，大概率是Firebase配置的静态资源目录错误，或是Windows路径分隔符与模拟器的兼容性问题，同时模拟器找不到可加载的静态文件，所以页面无内容。

分步解决步骤 #

1. 修正Firebase配置的静态资源目录 #

React项目编译后的生产环境静态文件默认存放在build文件夹，而非开发时的public目录。打开项目根目录的firebase.json，修改hosting配置：

"hosting": {
  "public": "build",
  // 保留其他原有配置（比如rewrites、headers等）
}

同时检查配置文件中所有路径字段，确保使用**正斜杠（/）**而非Windows的反斜杠（\）。

2. 重新编译React项目 #

模拟器需要读取编译后的静态文件，执行以下命令生成最新的build文件夹：

yarn build

执行完成后，确认项目根目录下的build文件夹存在，且内部包含index.html、static等文件。

3. 清理Firebase模拟器缓存 #

旧缓存可能导致路径解析异常，按以下步骤清理：

• 打开Windows文件资源管理器，在地址栏输入%APPDATA%\firebase\emulators
• 删除该目录下的所有文件及文件夹

4. 统一Node.js与Firebase CLI版本 #

版本不兼容也可能引发异常：

• 在VS Code终端执行以下命令，查看当前版本：

  node -v
  firebase --version
  

• 对比旧电脑上的版本号，如果不一致，卸载当前Firebase CLI并重新安装对应版本：

  npm uninstall -g firebase-tools
  npm install -g firebase-tools@x.x.x  # 替换x.x.x为旧电脑的版本号
  

5. 重新启动模拟器 #

在项目根目录的终端执行指定端口的启动命令：

firebase emulators:start --hosting-port 5033

启动成功后，访问http://localhost:5033即可看到React应用内容。

6. 权限与路径检查（可选） #

• 确保VS Code是以管理员权限打开的，避免文件读取权限不足
• 确认终端当前路径是项目根目录（可通过pwd或cd命令检查）

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