Vue.jsルーター：履歴モードとAWS S3（RoutingRules）

I次Vue.jsアプリケーションアップやAmazon S3とのCloudFlareで実行されている：Vue.jsルーター：履歴モードとAWS S3（RoutingRules）

https://www.team2work.at/

私は開きますインデックスと参照/ジョブ、すべて正常に動作します。私は新しいタブで直接雇用のようなルートを開いたり、ページを更新する場合でも、私は戻ってS3から次のエラーを取得する：

404 Not Found 

Code: NoSuchKey 
Message: The specified key does not exist. 
Key: unternehmen 
RequestId: 6514F9A1F4C29235 
HostId: +BVrPLJSGdzSYogzWJ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=

ただ問題はVue.js履歴モードであることを読んで：https://router.vuejs.org/de/essentials/history-mode.html

Amazon S3バケツのルーティングルールで問題を解決したいと思います。 Apache RewriteRuleはS3をどのように探しますか？

<IfModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] 
</IfModule>

は、次のことを試みたが、それは動作しません：

<RoutingRules> 
    <RoutingRule> 
    <Condition> 
     <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals> 
    </Condition> 
    <Redirect> 
     <HostName>team2work.at</HostName> 
     <ReplaceKeyWith>index.html</ReplaceKeyWith> 
    </Redirect> 
    </RoutingRule> 
</RoutingRules>

私はそのようにそれを行う場合、私はちょうど私のヘッダーとフッターはレンダリングされませんが、より多くの何も取得します。

ありがとうございました！ので、要求はそのような/ジョブが次にS3 404を返すようにサブパスに（Javascriptのアプリケーションの外で）直接行われた場合

：

出典

2017-03-29 mrks

だから履歴モードを無効にしましたか？ –

ええ、S3と履歴モードでは動作しませんでした。 – mrks

@mrks受け入れた回答[S3リダイレクト]はハッシュモードで動作しましたか？ – comfytoday

私はこの問題は、2つの成分を持っていると思いますパス/オブジェクトは存在しません。これを修正する最も簡単な方法は、すべてのエラーページをindex.htmlにリダイレクトするS3の中からです。

しかし、これはCloudfrontなどのCDNや、おそらくCloudflareでは機能しません。 > /index.htmlが求人 - - > /index.htmlが

例えば

誰かが行った場合、要求

ジョブ/：

良いトリックは、このようにユーザーをリダイレクトS3内のファイルを使用することです

"redirect":"<html><head><meta http-equiv=\"refresh\" content=\"0; url=http://example.com/site/index.html\" /></head> 
<body>Redirecting to <a href=\"http://example.com/site/index.html\">Home</a></body></html>"

第二に...

Iの場合：サイトに/彼らは、次のHTMLファイルを取得しますそれは私がちょうど私のヘッダーとフッタがレンダリングされるのを好むのですが、何もありません。

これは、ルータビューを含むコンポーネントがロードされていても、ルータビューが正しく初期化されなかった問題です。

私は今、メインの「アプリケーション」コンポーネントが作成されたとき、私のルータをリダイレクトであるために行っているもの：

created() { 
console.log('route', this.$route.path) 
this.$router.replace(this.$route.query.redirect || '/') 
}

このそこに置かれたパスからのindex.htmlを削除するの追加ボーナスを（持っていますあなたの新しいリダイレクトによって）あなたのルータービューをレンダリングさせている間に...

My #appコンポーネントは、すべてのサブページ/コンポーネントをレンダリングするnavbar、footer、およびrouter-viewを持つ親コンポーネントです。

出典

2017-03-31 06:22:01 comfytoday

注：この回答は受け入れられますが、[動作しません]（https://stackoverflow.com/questions/43095823/vue-js-router-history-mode-and-aws-s3-routingrules?noredirect=1 ＃comment76988309_43095823）。 –

私はこの行を実装することができました：this。$ router.replace（this。$ route.fullPath || '/'） – aero

私はこの回答が遅くなることを知っていますが、他の誰かがクラウドフロントでこれを解決する別の方法を探している場合、ページが見つからない場合にs3リダイレクトするユーザーのカスタムページを作成する必要はありません。これを行う代わりに、カスタムエラー応答をクラウドフロントに作成して配布することができます。

これは、常にファイルが見つからない場合には/index.htmlにリダイレクトされますし、それはアプリのルートトリガを行います。

出典

2017-11-29 14:13:32 Mindastic

Vue.jsルーター：履歴モードとAWS S3（RoutingRules）

答えて

関連する問題