Angular中的.htaccess仅适用于子文件夹

lstz6jyr  于 2023-02-05  发布在  Angular
关注(0)|答案(1)|浏览(140)

我已经将应用部署到Debian 11 Apache服务器的var/www/html文件夹中,即var/www/html/foo。作为我第一次部署Angular应用,我注意到路由和硬刷新的问题(实际上,每当我尝试刷新应用页面时,就会出现404错误)。我的应用有几个路由,例如:

site.com/items
site.com/map
site.com/item/4
...

我已经读到我需要创建一个.htaccess文件来修复这个问题,所以我创建了一个文件并将其放置到根目录中(即html)。

.htaccess网站

RewriteEngine On
    RewriteBase /
    # 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

由于var/www/html是我不管理的其他应用程序(例如var/www/html/bar1var/www/html/bar2)的共享文件夹,我还使用RewriteEngine Off创建了其他.htaccess文件,并将它们放入这些应用程序文件夹中,以避免出现问题。
为清楚起见,这是我的文件夹的树结构:

var/www/html:.
│   .htaccess
│   ...
│   ...
├───foo (my app)
├───bar1
│   │   .htaccess (RewriteEngine Off)
│   │   ...
└───bar2
        .htaccess (RewriteEngine Off)
        ...

不幸的是,这个.htaccess似乎不能正常工作。我在使用site.com/foo应用程序时仍然遇到硬刷新问题。
接下来是“有趣”的部分:出于测试目的,我在var/www/html/foo文件夹中创建了另一个foo子文件夹,它完全是包含Angular应用程序dist的父文件夹(减去.htaccess)的副本。每当我访问site.com/foo/foo时,应用程序都按预期工作(没有硬刷新问题);相反,如果我访问site.com/foo,硬刷新就不再起作用了。同样,为了清晰起见,这里是树结构。注意,我在父foo中放置了另一个.htaccess

var/www/html/foo:.
│   .htaccess
│   favicon.ico
│   index.html
│   main.js
│   main.js.map
│   polyfills.js
│   polyfills.js.map
│   runtime.js
│   runtime.js.map
│   scripts.js
│   scripts.js.map
│   styles.css
│   styles.css.map
│   vendor.js
│   vendor.js.map
│   
├───assets
│   │   ...
│   ├───img
│   │       ...
│           
└───foo
    │   favicon.ico
    │   index.html
    │   main.js
    │   main.js.map
    │   polyfills.js
    │   polyfills.js.map
    │   runtime.js
    │   runtime.js.map
    │   scripts.js
    │   scripts.js.map
    │   styles.css
    │   styles.css.map
    │   vendor.js
    │   vendor.js.map
    │   
    └───assets
        │   ...  
        ├───img
        │       ...

文件夹和它们的内容是完全相同的,所以我猜这与.htaccess有关。你知道为什么会发生这种情况,以及如何修复第一个foo文件夹中的硬刷新问题吗?另外,我想将foo的内容移动到html文件夹中,为了让我的应用位于mysite.com。可以将.htaccess保留在根目录中吗(即html)。
谢谢你的帮助!

g52tjvyc

g52tjvyc1#

所以,首先我假设你使用的是Apache/httpd服务器,并启用了所有必要的扩展。这不是Angular本身的问题,而是Apache/. htaccess配置的问题。基本上,你需要做的是为域配置http流量,始终指向你的index.html文件。
请查看这个. htaccess文件,您将它放在根目录下(index.html旁边),应该指向哪个域。

<IfModule mod_rewrite.c>
    RewriteEngine On
    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]
</IfModule>

如果它不工作,那么我建议检查您的Apache配置并启用mod_rewrite

sudo a2enmod rewrite

我还会检查vhost配置以确保

AllowOverride all

包括在内

    • 重要提示!**请记住在更改后重新启动Apache服务器。

相关问题