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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL/MariaDB で完全な Unicode をサポートする方法
概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...
私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...
コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...
スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...
この記事では、例を使用して、MySQL ストアド プロシージャでのループ ステートメント (WHIL...
以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、...
Docker コンテナでユーザーを切り替えると、権限が不十分であるというメッセージが表示されます。解...
序文:データベースパラダイムについてはよく耳にしていましたが、詳細まで理解したことはありませんでした...
目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...
まず、mysqlサービスを開始および停止します ネットストップmysql ネットスタートMySQL ...
パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...
質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...
目次スタイルスコープスタイルモジュール状態駆動型動的CSS要約するスタイルスコープ注意事項:スタイル...
この記事ではMySQL 8.0.24バージョンのインストールと設定方法を記録し、皆さんと共有しますM...
この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....