nginxデプロイメントvueプロジェクトがjs cssファイルを見つけられない問題を解決する方法
npm 実行後に何度も build
が実行され、webpack によって index.html に js ファイルと css ファイルの相対ディレクトリが自動的に挿入されます。
ファイル サーバーに公開した後、nginx はファイルを見つけることができません。
vue-cli@3
vue-cli@3 では、すべてのファイルを Webpack の index.html
に挿入する必要があります。 baseurl
. プロジェクト vue.config.js
のルート ディレクトリに新しいものを作成し、次の内容を追加する必要があります:
... module.exports = { baseurl: isprod ? '/basexxx/' : '/', .... }
必要なもの注意すべき点は開発環境です。baseurl
を追加する必要はありません。
vue-cli@2
vue-cli@3 以外で生成されたプロジェクトの場合、Webpack の実装方法を気にしない場合は、必要なのは、 config/index.js
を見つけるには、build
の assetspublicpath
を変更するだけです。
それが実現可能かどうかを検証するには、ローカルでビルドして、dist/index.html
で参照されている js css ファイルのパスに が含まれているかどうかを確認します。先ほど設定したassetspublicpath
以上です。
この設定で十分な理由が気になる学生の場合は、引き続き build/webpack.base.conf.js
ファイル
# を見てください。
production モードでは、
config/index.js で設定され、
publicpath のデフォルトは
です。
以上がnginxデプロイメントvueプロジェクトがjs cssファイルを見つけられない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

json.parse()stringにオブジェクトを使用することは、最も安全で効率的です。文字列がJSON仕様に準拠していることを確認し、一般的なエラーを回避します。 Try ... CATCHを使用して例外を処理して、コードの堅牢性を向上させます。セキュリティリスクがあるeval()メソッドの使用は避けてください。巨大なJSONの弦の場合、パフォーマンスを最適化するために、チャンクされた解析または非同期解析を考慮することができます。

データ構造は、VUEおよびElement-UIがカスケードしたドロップダウンボックスがプロップを通過し、静的データの直接割り当てがサポートされている場合に明確に定義する必要があります。データが動的に取得される場合は、ライフサイクルフック内で値を割り当て、非同期状況を処理することをお勧めします。非標準のデータ構造の場合、デフォルトプロップまたは変換データ形式を変更する必要があります。意味のある変数名とコメントで、コードをシンプルで理解しやすいままにしてください。パフォーマンスを最適化するには、仮想スクロールまたは怠zyな読み込み手法を使用できます。

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを< div>をラップします。 CSSアニメーションを定義し、オーバーフローを設定します:非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex()を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

エクスポートデフォルトは、VUEコンポーネントのエクスポートに使用され、他のモジュールがアクセスできるようにします。インポートは、単一または複数のコンポーネントをインポートできる他のモジュールからコンポーネントをインポートするために使用されます。

vue.jsでのaxios要求方法の使用には、次の原則に従う必要があります。取得:リソースを取得し、データを変更しないでください。投稿:データの作成または送信、データの追加または変更。 PUT:既存のリソースを更新または交換します。削除:サーバーからリソースを削除します。

Vueコンポーネントの合格値は、コンポーネント間でデータと情報を渡すメカニズムです。プロパティ(小道具)またはイベントを介して実装できます:プロップ:コンポーネントで受信するデータを宣言し、親コンポーネントにデータを渡します。イベント:$ EMITメソッドを使用して、VONディレクティブを使用してイベントをトリガーし、親コンポーネントでイベントを聞きます。

Vue.jsでは、Lazy Loadingを使用すると、コンポーネントまたはリソースを必要に応じて動的にロードすることができ、初期ページの読み込み時間を短縮し、パフォーマンスを改善できます。特定の実装方法には、< Keep-Alive>および<コンポーネントは>コンポーネント。怠zyなロードは、FOUC(スプラッシュ画面)の問題を引き起こす可能性があり、不必要なパフォーマンスのオーバーヘッドを避けるために怠zyなロードが必要なコンポーネントにのみ使用する必要があることに注意してください。

vue.jsのオブジェクトに文字列を変換する場合、標準のjson文字列にはjson.parse()が推奨されます。非標準のJSON文字列の場合、文字列は正規表現を使用して処理し、フォーマットまたはデコードされたURLエンコードに従ってメソッドを削減できます。文字列形式に従って適切な方法を選択し、バグを避けるためにセキュリティとエンコードの問題に注意してください。
