如何在PHP网页部署托管PWA？Bluehost部署遇404错误求助

我之前部署Angular项目到Bluehost时也碰到过一模一样的问题，总结几个大概率的原因和解决方法：

• 检查资源路径是否正确
  Angular打包默认用相对路径，但如果你的站点不是部署在根目录（比如是yourdomain.com/test-pwa/这种子路径），需要在angular.json里修改build配置的baseHref，比如：

  "build": {
    "options": {
      "baseHref": "/test-pwa/",
      // 其他配置...
    }
  }
  

  改完重新打包部署，确保index.html里的资源引用路径和实际文件位置匹配。

• 确认Bluehost的文件上传目录
  Bluehost默认的网站根目录是public_html，如果你的PWA文件是传到了子文件夹，要确保访问路径对应。另外，检查上传的文件是否完整——有时候FTP上传会漏掉一些小文件（比如manifest.webmanifest），可以重新上传整个dist文件夹，或者用压缩包上传后在Bluehost后台解压，避免传输丢失。

• 配置.htaccess解决路由和资源加载问题
  Angular是单页应用，同时PWA需要正确的资源MIME类型，在public_html（或你的PWA根目录）创建/修改.htaccess文件，添加以下内容：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  
  # 配置manifest和service worker的MIME类型
  AddType application/manifest+json .webmanifest
  AddType application/javascript .js
  AddType text/css .css
  

  这个配置既解决单页应用的路由跳转问题，也确保服务器能正确识别PWA相关资源的类型，避免因为MIME类型不对导致的加载失败。

• HTTPS相关的资源引用检查
  虽然你配置了HTTPS，但要确保index.html里的资源引用都是相对路径或者HTTPS绝对路径，不要混有HTTP的引用（浏览器会拦截）。可以打开浏览器开发者工具的Network标签，看404请求的完整URL，确认是否是协议不匹配或者路径错误。

另外，Firebase托管会自动处理很多这些配置（比如baseHref、MIME类型、路由规则），所以在上面正常，但自行托管需要手动配置这些细节。

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