21

GAE (Google App Engine – Java) で AngularJS を使用してアプリを作成しました。

SEO対応に変換したい。

index.html

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

本体は を介し​​て動的にロードされます<div ui-view></div>。

app.js

$locationProvider.html5Mode(true);

URL は正常に機能しますが、ページを更新すると 404 エラーが発生します。

これが何を引き起こしているのか、何か分かりますか？

4

6 に答える 6

20

あなたはすでにこれを解決していると確信していますが、この問題に遭遇した他の人のために：

基本的に、AngularJS$locationProvider.html5mode(true)は HTML5 を利用history.pushState()します。これは、ページをリロードせずに、ユーザーの履歴とアドレス バーの URL を人為的に変更します。のルートを (Angular で) 作成し/aboutても、サーバー上に一致するルートがない場合、ページをリロードするとサーバー上に存在しないという事実が明らかになるという問題が発生します。最も簡単な解決策は、アプリがアクセスできるすべてのルートに対して、アプリのエントリ ポイント ( /index.html?) をミラーリングすることです。

参照: https://stackoverflow.com/a/16570533/1500501

于 2014-06-25T02:17:40.160 に答える
11

役立つはずです。公式のAngular Doc; https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

それでも関連部分をここに貼り付けますが、ドキュメントを見ることをお勧めします。

Apache Rewrites

サーバー名 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>

于 2015-06-23T16:44:09.573 に答える
1

grunt ファイルの liveload ミドルウェア セクションに以下のセクションを追加してみてください。

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)
            ];
          }
        }
      }  
   }
于 2015-12-01T08:58:34.613 に答える
1

私にとっては、インデックス（メイン）ページのタグ内の最初の行として次の行を修正します。

<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" />

于 2017-01-08T11:49:28.527 に答える