Vue の最初の画面が白い画面になる理由と解決策

Vue の最初の画面が白い画面になる場合は、次の理由が考えられます。

1. ルーティング モードが間違っています (ルーティングが繰り返されているか、ルーティングが設定されていません)

   (1) ルーティングモードモードがhistoryに設定されているため、デフォルトはhashです。

         解決策: モードをハッシュ モードに変更するか、モード設定を直接削除します。履歴にはバックエンドの協力が必要です。

   (2) 動的ルーティングを実行する場合、next() release と next(...to, replace) の違いによって発生する白い画面は、本質的にはルーティングの重複です。

   (3) 最初の通常のアクセス、更新後の白い画面、vuex がローカル ストレージと結合されていないため、更新後にデータが失われる

2. dist 内のファイル参照パスが間違っています (vue プロジェクトのパッケージ化のパスの問題)

パッケージ化された dist ディレクトリ内のファイル参照パスが正しくなく、ファイルが見つからないためエラーが報告され、白い画面が表示されます。

解決策: vue.config.js の publicPath: ''./"

3. ブラウザはes6をサポートしていません

プロジェクトでは es6 構文が使用されていますが、一部のブラウザでは es6 がサポートされていないため、解析できないコンパイル エラーが発生し、白い画面が表示されます。

解決策:
Babel をインストールします。これにより、これらの新しい構文がコードの下位バージョンにトランスパイルされます。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

4. ロードされたファイルのリソースが大きすぎます

シングルページアプリケーションのHTMLはjsで生成されますが、最初の画面では大きなjsファイル(app.jsとvendor.js)を読み込む必要があるため、ネットワーク速度が悪い場合はある程度の白い画面が表示されます。生成された

解決：

ルートの遅延ロード、コンポーネントの遅延ロード

ルーティングの遅延読み込み

// 1、Vue异步组件技术：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}
 
// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}
 
// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}
 

 コンポーネントの遅延読み込み

// import 方式
components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
// require 方式
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},