vue.js パッケージ化プロジェクトの後の空白ページの解決策

Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化後にindex.htmlページを開くと空白になり、コンソールを開くとこのようなエラーが見つかるという問題に遭遇すると思います。

この状況に対処するには 2 つの方法があります (vue-cli2 と vue-cli3)。まずは vue-cli2 について説明します。まず、config/index.js ファイルを見つけて、assetPublicPath のパスを "./" に変更します。

Vue-cli3はもう少し面倒です。vue-cli3ははるかにシンプルで設定ファイルがないため、自分で作成する必要があります。プロジェクトのルートディレクトリにのみ作成でき、ファイル名はvue.config.jsのみにすることができます。次に、このファイルに次のコードを追加します。

モジュール.エクスポート = {
    資産ディレクトリ: 'static'、
    平行: 偽、
    パブリックパス: './',
} 

このステップでは問題ないはずですが、一部の友達はまだ表示されません。これはルーティング モードが原因です。ルーティング モードを「ハッシュ」に変更するだけです。少し見苦しいですが、少なくとも機能は出ています。「ハッシュ」モードを使用したくなく、履歴モードを使用する必要がある場合は、ローカルでは機能しません。サーバーを使用する必要があります。履歴モードを使用するために、vue で nginx を使用する方法は次のとおりです。

nginxのインストールについては説明しません。すでにnginxがインストールされていると仮定して、

場所 /aaa {未定義
            エイリアス D:/bbb/ccc;
            インデックス index.html index.htm;
            try_files $uri $uri/ /aaa/index.html;
        }

このうち、/aaa はアクセスするアドレス、D:/bbb/ccc はファイルが実際に保存されているパス、index はエントリ ファイルを参照します。ファイル名が index.html でない場合は、エントリ ファイルの名前に置き換えます。ここで最も重要なのは try_files $uri $uri/ /aaa/index.html で、主に vue の履歴モードを処理するために使用されます。nginx を構成した後、プロジェクトに何かを追加する必要があります。実際には、それも非常に簡単です。プロジェクトの src ディレクトリに追加するだけです。

config/index.jsに追加

そうしないと、ページを更新すると 404 エラーが発生します。もちろん、これはプロジェクトがセカンダリ ルートに配置されている場合です。プライマリ ルートの場合は、ベース属性を追加する必要はありません。

最終的な効果は以下のようになります。

これで、vue のパッケージ化からデプロイまでのプロセスが完了しました。皆様のお役に立てれば幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。