.htaccess用于具有HTML5模式的AngularJS应用的子文件夹 [英] .htaccess for subfolder of AngularJS app with HTML5 mode

问题描述

概述:

我有一个使用 $locationProvider.html5Mode(true) 的AngularJS应用程序，它是从Apache服务器提供的.到现在为止，我一直使用源代码来访问其他源代码，而对于angularJS的HTML5模式，我只需要重定向到index.html即可.因此，我在/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)

我尝试使用/a中的此处中的某些条件应用程序的.htaccess文件，并将另一个.htaccess文件移动到/app/dist中，但没有成功.我什至不知道这两种方式是否可以合并.我知道我可以将dist文件夹用作/app，但是我并不是真的想要这个，因为/app是一个回购协议，并且可以更轻松地保持更新.那么，如何通过重定向来实现这一目标?

此外，还有第二件事，是否有可能以某种方式放置标记，以便让Alpha用户使用常规(非最小化)版本进行更好的调试?

更新:

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

为此，我使用了AngularJS 1.4.8的初始配置，该配置可能会产生一些错误，例如在此处和<请在href ="http://github.com/angular/angular.js/issues/11091" rel ="nofollow noreferrer">此处.随时将AngularJS版本更新为1.5.8(Angular 1的最新稳定版本)，但请考虑对 Cosmin Ababei的评论发布.此外，该项目使用npm安装grunt(以及grunt的其他扩展名)，bower来安装angular和其他一些基本组件，并使用grunt来构建缩小版(实际上，现在只是将资源串联在同一文件中).如果您需要更改依赖关系，请不要忘记运行bower install.如果要重新生成dist文件夹，请不要忘记运行npm install和grunt build.

我假设/dist目录中有index.html，其中的URL指向更新的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可以具有您想要的任何值.

Overview :

I have an AngularJS application that uses $locationProvider.html5Mode(true) and it is served from an Apache server. Until now I used the source code to be accessed from the others and I just needed a redirect to index.html for the angularJS's HTML5 mode. So I had this for the .htaccess file for my /app folder.

.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>

Modifications :

I then added Grunt for minifying the whole solution that is generated in the /dist folder of the app(so now the minified solution is found at /app/dist). I would now like to route the whole traffic of my app to the minified version, without making the users change the link. So, in practice I would like to redirect every call from /app to /app/dist.

Directory Structure now :

app
    dist
        minified versions(css,html,js)

I tried using some conditions from here in /app's .htaccess and moved the other .htaccess file in /app/dist, but with no success. I don't even know if the two can be combined in this way. I know I can use the dist folder as /app instead, but I wouldn't really want this, as /app is a repo and it is way easier to keep it updated. So how can I manage to achieve this with redirecting?

Also, as a second thing, is it possible to put a flag somehow so I let alpha users use the normal (not-minified) version for better debugging?

Update:

I added a sample project for this here. I just kept the initial .htaccess files that i showed above and you can check that both versions(/test and /test/dist) work as stated above. Also, it probably has some unused code and dependencies, but I just cut the other parts from my project(don't judge :D).

For this I used the initial configuration with AngularJS 1.4.8 that could generate some errors like the one stated here and here. Feel free to update the AngularJS version to 1.5.8(the last stable release of Angular 1), but take in consideration the comments on Cosmin Ababei's post as well. Also, the project uses npm for installing grunt(and other extensions for grunt), bower for angular and some other basic components and grunt for building the minified version(actually, it's just concatenating resources in same files for now). If you need to change the dependencies, please don't forget to run bower install. If you want to regenerate the dist folder, don't forget to run npm install and grunt build.

解决方案

I'll assume that inside the /dist directory you have index.html with the updated URLs which point to the minified resources and the correct <base> tag. Note that the <base> tag must point to the /dist folder - just append /dist to the value you're using for the uncompressed index.html and you'd be fine.

With those things in order, here's the updated .htaccess file:

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]

You'll notice two things:

• I've removed RewriteCond %{REQUEST_FILENAME} -d as most likely you don't need to serve whole directories

• I've added the ALPHA_USER cookie which would redirect the users to the uncompressed files. This cookie can have any value you desire.

这篇关于.htaccess用于具有HTML5模式的AngularJS应用的子文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！