htaccess 重写到 dist 文件夹并将 AngularJS html5mode 设置为 true答案

【问题标题】：htaccess rewrite to dist folder and set AngularJS html5mode truehtaccess 重写到 dist 文件夹并将 AngularJS html5mode 设置为 true
【发布时间】：2017-01-31 11:38:57
【问题描述】：

我在 AngularJS 中有一个应用程序，我需要将 html5mode 设置为 true 以便从 URL 中删除哈希 /#/。缩小版的应用程序位于dist 文件夹中。

问题：我的目标是将流量重写到dist 文件夹并允许启用 html5mode。有人可以帮忙吗？

我可以通过设置让 html5mode 工作 <base href="/" /> 并将 $locationProvider.html5Mode(true); 添加到应用配置和 ui-router 文件的底部。

所有这些都在通过 Gulp 使用 NodeJS 的开发模式下工作。当我将应用程序移动到 Apache 上的其他环境时，设置出现问题。

问题是：

A.该应用无法加载任何资产，因为它正在服务器根目录中查找它们。

B.该应用程序无法重新加载并登陆请求的 URL。它给出了 404 错误。

如果在应用程序中未启用 html5mode，我正在使用此 htaccess 重定向到 distfolder，它工作正常。

# This first part is not relevant for the question but is included for practical purposes. It rewrites traffic to HTTPS
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(app\.)?example\.com$ [NC]
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,NE,R=301]

Options +FollowSymLinks
RewriteCond %{REQUEST_URI} !(.*)dist
RewriteRule ^(.*)$ dist/$1 [L]

它需要在不同的环境中工作相同，以便我可以在本地和其他环境中使用它。在本地，它将位于localhost/project_name/app/webapp/(dist)，而在其他环境中，它将位于https://app.example.com/(dist)

我也尝试设置<base href="/dist/" />，但它也不起作用。它只会将dist 文件夹添加到资产路径中，并且也不能在开发中使用，因为应用程序不会从dist 提供。

基本上各部分都可以工作，但放在一起就失败了。

我已经经历了许多 SO 答案，但都没有成功：

in html5mode(true) views are not loading in page refresh in angular js

AngularJS + html5Mode + custom fallback

angularjs ngroute with html5mode(true) on apache fails

AngularJS: html5Mode(true) causing 404 error

【问题讨论】：

您使用的是 Apache？创建一个新的 VHOST，它直接指向您的 dist 文件夹。保持简单。

标签： angularjs apache .htaccess html5mode

【解决方案1】：

与其纠结于重写规则，如果你有 Apache2，不如定义一个 fallbackresource。

.htaccess 文件中的这两行代码将解决您的问题：

FallbackResource /index.php
DirectoryIndex index.html

第二行是必要的，因为只有谷歌浏览器。

To learn more about fallback resources, see the Apache documentation here

【讨论】：