.htaccess 用于具有 HTML5 模式的 AngularJS 应用程序的子文件夹

Posted 2023-02-27

【中文标题】.htaccess 用于具有 HTML5 模式的 AngularJS 应用程序的子文件夹

【英文标题】：.htaccess for subfolder of AngularJS app with HTML5 mode

【发布时间】：2017-01-03 01:19:57

【问题描述】：

概述：

我有一个使用 $locationProvider.html5Mode(true) 的 AngularJS 应用程序，它由 Apache 服务器提供服务。到目前为止，我使用的是可以从其他人那里访问的源代码，并且我只需要重定向到 index.html 来实现 angularJS 的 HTML5 模式。所以我为我的/app 文件夹提供了.htaccess 文件。

.htaccess ：

<IfModule mod_rewrite.c>

    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %REQUEST_FILENAME -f [OR]
    RewriteCond %REQUEST_FILENAME -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]

</IfModule>

修改：

然后我添加了 Grunt 以缩小在应用程序的 /dist 文件夹中生成的整个解决方案（因此现在可以在 /app/dist 中找到缩小的解决方案）。我现在想将我的应用程序的全部流量路由到缩小版本，而不让用户更改链接。因此，在实践中，我想将每个呼叫从 /app 重定向到 /app/dist。

现在的目录结构：

app
    dist
        minified versions(css,html,js)

我尝试在 /app 的 .htaccess 中使用来自 here 的一些条件，并将另一个 .htaccess 文件移动到 /app/dist 中，但没有成功。我什至不知道两者是否可以通过这种方式结合起来。我知道我可以将 dist 文件夹用作 /app ，但我真的不想要这个，因为 /app 是一个存储库，并且更容易保持更新。那么我怎样才能通过重定向来实现这一点呢？

另外，作为第二件事，是否可以以某种方式放置一个标志，以便我让 alpha 用户使用普通（未缩小）版本进行更好的调试？

更新：

我为此here 添加了一个示例项目。我只保留了上面显示的初始 .htaccess 文件，您可以检查两个版本（/test 和 /test/dist）是否按上述方式工作。此外，它可能有一些未使用的代码和依赖项，但我只是从我的项目中删除了其他部分（不要判断：D）。

为此，我使用了 AngularJS 1.4.8 的初始配置，它可能会产生一些错误，例如 here 和 here 中所述的错误。随意将 AngularJS 版本更新到 1.5.8（Angular 1 的最后一个稳定版本），但也要考虑Cosmin Ababei's post 上的 cmets。此外，该项目使用 npm 安装 grunt（以及 grunt 的其他扩展），使用 bower 安装 angular 和一些其他基本组件，并使用 grunt 构建缩小版本（实际上，它现在只是在相同文件中连接资源）。如果您需要更改依赖项，请不要忘记运行bower install。如果要重新生成 dist 文件夹，不要忘记运行 npm install 和 grunt build。

【问题讨论】：

你不能只使用 RewriteRule ^ dist/index.html [L]

但是资源也在 dist 文件夹中。

对，我忽略了这一点。好吧，在这一点上，我自己只能用谷歌搜索，但这看起来适合你的情况（它是关于 wordpress，但它是一个很好的清晰描述）：codex.wordpress.org/…

RewriteCond %HTTP_HOST ^(www.)?localhost/app$ RewriteRule ^(/)?$ dist [L] 这不起作用

您已经在app/dist/ 中拥有一个.htaccess 了吗？如果是，那么在这里显示？您使用什么规则来提供缩小的资源？

【参考方案1】：

在 public_html => /app => .htaccess 里面试试这个：

RewriteEngine On

RewriteCond %HTTP_HOST ^example\.com$ [NC]
RewriteRule ^ http://www.%HTTP_HOST%REQUEST_URI [L,R=301,NE]

RewriteCond %REQUEST_FILENAME !-f
RewriteCond %REQUEST_FILENAME !-d
RewriteRule ^ dist/index.html [L]

注意： HTML <base> 标签应该指向 dist 文件夹。我希望这个解决方案能如您所愿。

【讨论】：

因 ERR_TOO_MANY_REDIRECTS 失败。

@RaduVlad 看到这篇文章几天前我也遇到了同样的问题..***.com/questions/39026692/…

谢谢，但我不知道我做错了什么:(。

【参考方案2】：

我假设在/dist 目录中，您有index.html 和更新后的URL，这些URL 指向缩小的资源和正确的<base> 标记。请注意<base> 标记必须指向/dist 文件夹 - 只需将/dist 附加到您用于未压缩 index.html 的值上，然后您会没事的。

这些东西都整理好了，下面是更新后的.htaccess 文件：

RewriteEngine On

# Don't rewrite files
RewriteCond %REQUEST_FILENAME -f
RewriteRule ^ - [L]

# If the ALPHA_USER cookie is set, serve the uncompressed files
RewriteCond %HTTP_COOKIE ALPHA_USER [NC]
RewriteRule ^ index.html [L]

# Rewrite everything
RewriteRule ^ dist/index.html [L]

你会注意到两件事：

我已删除 RewriteCond %REQUEST_FILENAME -d，因为您很可能不需要提供整个目录

我添加了ALPHA_USER cookie，它将用户重定向到未压缩的文件。此 cookie 可以具有您想要的任何值。

【讨论】：

它仍然不起作用，我收到以下错误：“app.src.js:20938 Uncaught TypeError: Cannot read property 'replace' of undefined”。如果我遇到问题，我正在尝试调试并来到这里。另外，是的，在 dist 文件夹中，基本标签有 /dist ，如果我在 /dist 文件夹中使用旧的 .htaccess 在 localhost/app/dist 上输入，一切正常。

在对***.com/questions/29261782/… 和github.com/angular/angular.js/issues/11091 进行了一些研究后，我将角度更新为1.5.8，并且可以正常工作。不幸的是，现在我可以通过链接访问localhost/app/dist，可能是角度重定向了我。我能以某种方式隐藏这个吗？或者我应该在角度应用程序中手动设置 url，在第一个 *** 链接中描述为一种可能性？

<base> url 必须指向服务器上的绝对 url。例如，如果现在您的应用程序位于www.my-domain.com/app，则必须更新它www.my-domain.com/app/dist。我不确定我是否理解您的网址中如何包含localhost。

好吧，目前我正在尝试使用 apache 服务器将它托管在我的本地计算机上。我现在遇到的问题是，当我输入http://localhost/app/ 时，我被重定向到http://localhost/app/dist/login 而不是http://localhost/app/login。索引文件中的<base href='http://localhost/app/dist/'/> 和<base href='/app/dist/'/> 都会发生这种情况。