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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueプロジェクトの最適化とパッケージ化の詳細な説明
  • Vueプロジェクトをパッケージ化してリリースする手順
  • Vueプロジェクトのパッケージングと展開の実際のプロセスの記録
  • Vueプロジェクトのフロントエンドを最適化およびパッケージ化するための必須のボーナスアイテム
  • Vueプロジェクトのパッケージ化の詳細な説明

<<:  MySQL/MariaDB で完全な Unicode をサポートする方法

>>:  HTML ウェブページのメタビューポート属性の説明

推薦する

CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...

0.1秒の価値!フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...

MySQL ストアド プロシージャにおけるループ ステートメント (WHILE、REPEAT、LOOP) の使用法の分析

この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...

HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...

Dockerコンテナでユーザーを切り替えるときに権限が不足する問題を解決する方法

Docker コンテナでユーザーを切り替えると、権限が不十分であるというメッセージが表示されます。解...

MySQLデータベースパラダイムの詳細な説明

序文:データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

CMDコマンドを使用してMySqlデータベースを操作する方法の詳細な説明

まず、mysqlサービスを開始および停止します ネットストップmysql ネットスタートMySQL ...

MySQL SQL ステートメント分析とクエリ最適化の詳細な説明

パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...

Nginx の Docker インストールの問題とエラー分析

質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...

Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

目次スタイルスコープスタイルモジュール状態駆動型動的CSS要約するスタイルスコープ注意事項:スタイル...

MySQL 8.0.24 バージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.24バージョンのインストールと設定方法を記録し、皆さんと共有しますM...

Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....