Angular SPA 在 Google PageSpeed Insights 上返回 404答案

【问题标题】：Angular SPA returns 404 on Google PageSpeed InsightsAngular SPA 在 Google PageSpeed Insights 上返回 404
【发布时间】：2020-07-03 22:21:28
【问题描述】：

我在 Angular 8 中有一个单页应用程序。我将我的网站部署到了 Apache 服务器。由于这是单页应用程序，所以在刷新站点时会出现 404 错误，因此我将“ErrorDocument 404 /index.html”行放在 .htaccess 文件中。所以这个问题已经解决了。

但现在的问题是，当我尝试使用“https://www.fakedomain.com/about-us”分析网站时，会出现这样的错误，

Lighthouse 返回错误：ERRORED_DOCUMENT_REQUEST。 Lighthouse 无法可靠地加载您请求的页面。确保您正在测试正确的 URL，并且服务器正确响应所有请求。（状态码：404）解雇

另外，另一个问题是在 URL 字段中输入“https://www.fakedomain.com/about-us”时会出现 404 错误，在此站点中用于 Google Web 缓存，https://cachedview.com/

所以我在分析中遇到了这些错误，但在浏览器中，内容加载完美。

【问题讨论】：

标签： angular apache single-page-application

【解决方案1】：

您运行以下构建命令来构建应用程序写道：

ng build --base-href=/ --prod

要部署，我们只需要将director dist /生成的代码复制到Apache HTTPD服务器的deploy文件夹中，并重写.htaccess，如下所示：

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -f [OR]
RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

记得根据您的应用名称更改应用名称。重启 Apache 后。

service httpd restart

祝你好运！

【讨论】：