vue で白い画面が表示されるのはいつですか?

vue で白い画面が表示される場合は 3 つの状況があります: 1. ルーティング モードを履歴に設定します。ハッシュに変更するか、モード設定を直接削除します。履歴を使用する必要がある場合は、上書きを追加します。サーバー側の候補リソースはすべての状況に十分です。 2. パッケージ化された dist ディレクトリ内のファイル参照パスが正しくなく、ファイルが見つからないためエラーが報告され、白い画面が表示されます。config の下にあるindex.js の bulid モジュールによってエクスポートされたパスを変更するだけです。 3. プロジェクトでは es6 構文が使用されていますが、ブラウザは es6 をサポートしていません。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue での白い画面現象には、主な理由と解決策がいくつかあります。

最初の原因: ルーティング モードは履歴に設定されており、デフォルトはハッシュです。

解決策: モード構成を直接ハッシュするか削除するように変更します。これを使用する必要がある場合は、すべての状況をカバーする候補リソースをサーバーに追加します。

履歴モードに変更すると、開いたときに空白になります。したがって、ハッシュに変更するか、モード設定を直接削除して、それをデフォルトにします。履歴モードを使用する必要がある場合は、すべての状況をカバーする候補リソースをサーバーに追加する必要があります。URL が静的リソースに一致しない場合は、アプリが依存するページであるindex.html を返す必要があります。

2 番目のタイプ: パッケージ化された dist ディレクトリ内のファイル参照パスが間違っており、ファイルが見つからないためエラーが報告され、白い画面が表示されます。

解決策: config の下にあるindex.js の bulid モジュールによってエクスポートされたパスを変更します。

index.html のコンテンツは script タグを通じて導入されており、パスが間違っているため、開いたときに必ず空白になります。まずデフォルトのパスを見てみましょう。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

デフォルトのassetsPublicPathは、ルートディレクトリである「/」です。 Index.html と static は同じディレクトリにあります。したがって、これを「./」に変更します。

それでもエラーが発生する場合は、build/webpack.prod.conf.js ファイルの下の webpackConfig を変更し、publicPath: "./" を出力属性に追加します。そしてパッケージングを再実行します。

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

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

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

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

【学習ビデオ共有:

vue ビデオ チュートリアル、Web フロントエンド ビデオ]

以上がvue で白い画面が表示されるのはいつですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。