Angular SPA 在 Google PageSpeed Insights 上返回 404

Question

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

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

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

此外，另一个问题是，当在URL字段中输入">https://www.fakedomain.com/about-us"时，它将收到404错误，在此站点中为Google网络缓存，https://cachedview.com/

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

Answer 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

请记住根据您的应用名称更改应用名称。重新启动阿帕奇后。

service httpd restart

祝你好运！