【vueプロジェクト】historyモード導入後のリフレッシュ新聞404
1572 ワード
プロジェクトがローカルで実行されている場合、トップページのサブページのリフレッシュに問題はありません.サーバに配備された後、ページエラーが表示され、404が表示される.
vueプロジェクトのvue-routerのmodeがhistoryルーティングモードの場合、対応する構成が行われていない場合に発生する可能性があります.
フロントエンドルーティング、すなわち、フロントエンドによってルーティングルールが維持されます.実装には2つあり、1つはurlのhash、すなわちよく言われるアンカーポイント(#)を利用し、JSはhashChangeイベントを通じてurlの変更を傍受し、IE 7および以下はポーリングする必要がある.もう1つはHTML 5のHistoryモードであり、urlを通常のウェブサイトのように「/」で分割するように見えるが、ページはジャンプしていないが、このモードを使用するにはサービス側のサポートが必要であり、サービス側はすべての要求を受けた後、indexを指す.htmlファイル、または404ページをindexに設定.html.そうでなければ、リフレッシュ時にページ404が表示されます.---『Vue.js実戦』
公式ドキュメントにはバックエンド構成の例がありますhttps://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
バックエンドはリソースをindexに向けています.htmlでは、静的リソースファイルのパスが正しいかどうかを確認します.ここでは、webpack 4+vue+vue-routが独自に構築したプロジェクトを例に挙げます.
ドメイン名がプロジェクトのルートディレクトリの場合、リソースファイルが参照するディレクトリは絶対パスです.
vueプロジェクトのvue-routerのmodeがhistoryルーティングモードの場合、対応する構成が行われていない場合に発生する可能性があります.
フロントエンドルーティング、すなわち、フロントエンドによってルーティングルールが維持されます.実装には2つあり、1つはurlのhash、すなわちよく言われるアンカーポイント(#)を利用し、JSはhashChangeイベントを通じてurlの変更を傍受し、IE 7および以下はポーリングする必要がある.もう1つはHTML 5のHistoryモードであり、urlを通常のウェブサイトのように「/」で分割するように見えるが、ページはジャンプしていないが、このモードを使用するにはサービス側のサポートが必要であり、サービス側はすべての要求を受けた後、indexを指す.htmlファイル、または404ページをindexに設定.html.そうでなければ、リフレッシュ時にページ404が表示されます.---『Vue.js実戦』
公式ドキュメントにはバックエンド構成の例がありますhttps://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
バックエンドはリソースをindexに向けています.htmlでは、静的リソースファイルのパスが正しいかどうかを確認します.ここでは、webpack 4+vue+vue-routが独自に構築したプロジェクトを例に挙げます.
ドメイン名がプロジェクトのルートディレクトリの場合、リソースファイルが参照するディレクトリは絶対パスです.
// ,publicPath
webpackBaseConfig.plugins = [];
module.exports = merge(webpackBaseConfig, {
output: {
publicPath: '/',//
// 20 hash
filename: '[name].[hash].js'
},
//...
}
の は、プロジェクトエントリファイルのルーティング 、historyモードを すればよい.vue-routerのデフォルトではhashモードが されます.//main.js
const RouterConfig = {
//mode: 'history',
//...
}
コールバックアドレス、# がある 、codeパラメータを できません. H 5が うコールバックアドレスは、#があることを さない.App 、 の に#をコンパイルする があります;いいえ、きれいです.