パッケージ化後にvueプロジェクトを開くときに空白ページが表示される問題を解決する方法

この記事では主に、Vue プロジェクトをパッケージ化した後に空白スペースを開くための解決策を紹介します。内容は非常に優れているので、参考として共有します。

インターネット上の多くの人が、Webpack を介して VUE プロジェクトをパッケージ化して生成されたリスト ファイルが HBulider でパッケージ化され、携帯電話で開くと空になっていると言っています。この主な理由はパスの問題です。

1. config の下で、index.js の bulid モジュールのエクスポート パスを変更することを忘れないでください。 Index.html のコンテンツは script タグを通じて導入されており、パスが間違っているため、開いたときに必ず空白になります。まずデフォルトのパスを見てみましょう。

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

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

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

// mode: 'history' // 默认hash

Vue プロジェクトのパッケージ化方法がわからない場合は、私が書いた別の詳細なチュートリアルをお読みください: Vue Webapp プロジェクトの HBulider によるネイティブ APP のパッケージ化

上記はこの記事の全内容です。皆さんの学習に役立つことを願っています。ヘルプ、その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Vue で履歴モードのパッケージングをルーティングした後の空白ページの問題を解決する方法

Vue WeChat 認証ログインのフロントエンドとバックエンドの分離の問題を解決する方法

以上がパッケージ化後にvueプロジェクトを開くときに空白ページが表示される問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。