Question

我使用AngularJS和GAE（Google App Engine - Java）创建了一个应用程序。

我想转换它与SEO兼容。

的index.html

<meta name="fragment" content="!" />
<base href="/">

并通过<div ui-view></div>动态加载正文。

app.js

$locationProvider.html5Mode(true);

网址工作正常，但当我刷新页面时，我收到404错误。

你有什么想法，这会导致什么？

Answer 1

我相信你已经解决了这个问题，但对于其他遇到此问题的人来说：

基本上AngularJS的$locationProvider.html5mode(true)使用HTML5的history.pushState()，它会人为地更改用户的历史记录和地址栏URL，而无需重新加载页面。如果为/about创建一个路径（在Angular中），但在服务器上没有任何匹配的路由，则会遇到重新加载页面的问题，显示它不在服务器上。最简单的解决方案是为应用程序可访问的所有路径镜像您的应用的入口点（/index.html？）。

请参阅：https://stackoverflow.com/a/16570533/1500501

Answer 2

应该是有用的，官方角度doc; https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

我仍然会在这里粘贴相关部分，但我会建议查看文档。

Apache Rewrites

ServerName my-app

DocumentRoot /path/to/app

<Directory /path/to/app>
    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]
</Directory>

Nginx重写

server {
server_name my-app;

index index.html;

root /path/to/app;

location / {
    try_files $uri $uri/ /index.html;
}
}

Azure IIS重写

<system.webServer>
 <rewrite>
  <rules> 
    <rule name="Main Rule" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>

Answer 3

尝试在grunt文件肝脏中间件部分中添加以下部分。

livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect().use(
                '/apply',
                connect.static('./app/index.html')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      }  
   }

Answer 4

对于在GAE上运行的Java应用程序，您可以使用

URL rewrite filter

您将找到名为urlrewrite.xml的XML文件。将所有路由放在此xml中，并以某种方式对其进行配置，以便获得如下请求：

/位置/编辑/ 120211

它将被重定向到

＃/位置/编辑/ 120211

您的应用将有时间进行自举并启动路由

Answer 5

对我来说，将以下行修复为索引（主）页面内标记的第一行：

<base href="/">

另外，您需要按如下方式配置IIS重写规则:(确保首先安装iis重写扩展）

 <system.webServer>
<rewrite>
  <rules>
    <rule name="AngularJS Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{REQUEST_URI}" pattern="(api)" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>
    <caching enabled="false" enableKernelCache="false" />

Answer 6

自从人们正在寻找这个答案以来已经有一段时间了，但我今天需要它。我用GAE，angularJS和ng-Route做了一个工作实例，它有相当格式化的链接。

以下是GitHub example

的链接

angularjs html5mode刷新页面获得404

的index.html

app.js

6 个答案: