React项目本地可下载APK，部署后点击按钮出现404无法下载

可能的原因及对应解决方案 #

1. 资源路径引用错误 #

本地开发时相对路径可能正常，但部署后项目可能处于子域名或子路径下，导致路径解析错误。

• Create React App项目：使用%PUBLIC_URL%前缀拼接APK路径，确保路径始终指向public文件夹下的资源：

  <a href="%PUBLIC_URL%/your-app.apk" download>下载APK</a>
  

• Vite项目：使用import.meta.env.BASE_URL获取项目基础路径，动态拼接APK地址：

  <a href={`${import.meta.env.BASE_URL}your-app.apk`} download>下载APK</a>
  

• 避免使用相对路径（如./your-app.apk），直接用绝对路径时要确认项目部署的根路径是否匹配。

2. 构建时APK文件未被正确打包 #

部分构建工具可能默认不识别APK文件类型，导致构建后dist/build文件夹中缺少该文件：

• Create React App：默认会将public文件夹下所有文件复制到build目录，构建后检查build文件夹是否存在APK文件，若不存在则重新执行npm run build。
• Vite：在vite.config.js中添加APK文件类型到资源包含列表，确保被正确打包：

  export default defineConfig({
    assetsInclude: ['**/*.apk']
  })
  

3. 服务器MIME类型配置缺失 #

部分服务器会拦截未配置MIME类型的文件请求，APK对应的MIME类型为application/vnd.android.package-archive：

• Nginx服务器：在配置文件中添加MIME类型映射：

  types {
      application/vnd.android.package-archive apk;
  }
  

• 托管平台（如Netlify、Vercel）：若自动识别失败，可在项目根目录创建_headers文件添加配置：

  /*.apk
    Content-Type: application/vnd.android.package-archive
  

4. 验证部署后的实际请求路径 #

点击下载按钮时，打开浏览器开发者工具的「网络」面板，查看请求的URL是否正确：

• 若请求的URL与实际部署的APK文件路径不符，调整路径引用规则；
• 确认服务器上确实存在该APK文件，若缺失则重新上传构建后的完整文件目录。

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