検索
ホームページ運用・保守Nginxnginxデプロイメントvueプロジェクトがjs cssファイルを見つけられない問題を解決する方法

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 を見つけるには、buildassetspublicpath を変更するだけです。

それが実現可能かどうかを検証するには、ローカルでビルドして、dist/index.html で参照されている js css ファイルのパスに が含まれているかどうかを確認します。先ほど設定したassetspublicpath 以上です。

この設定で十分な理由が気になる学生の場合は、引き続き build/webpack.base.conf.js ファイル


# を見てください。 nginx部署vue项目找不到js css文件怎么解决

##非

production モードでは、config/index.js で設定され、publicpath のデフォルトは です。


nginx部署vue项目找不到js css文件怎么解决

以上がnginxデプロイメントvueプロジェクトがjs cssファイルを見つけられない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は亿速云で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
Nginx:高性能Webサーバーの紹介Nginx:高性能Webサーバーの紹介Apr 29, 2025 am 12:02 AM

Nginxは2002年に開始され、C10Kの問題を解決するためにIgorsysoevによって開発されました。 1.Nginxは、高性能の非同期アーキテクチャであり、高い並行性に適した高性能Webサーバーです。 2。システムのパフォーマンスと信頼性を向上させるために、リバースプロキシ、ロードバランス、キャッシュなどの高度な機能を提供します。 3。最適化手法には、HTTP/2とセキュリティ構成を使用した、ワーカープロセスの数の調整、GZIP圧縮の有効化が含まれます。

Nginx vs. Apache:アーキテクチャを見てくださいNginx vs. Apache:アーキテクチャを見てくださいApr 28, 2025 am 12:13 AM

NginxとApacheの主なアーキテクチャの違いは、Nginxがイベント駆動型の非同期非ブロッキングモデルを採用し、Apacheはプロセスまたはスレッドモデルを使用することです。 1)nginxは、静的な内容と逆プロキシに適したイベントループとI/O多重化メカニズムを介して、高電流接続を効率的に処理します。 2)Apacheは、非常に安定しているがリソース消費量が高いマルチプロセスまたはマルチスレッドモデルを採用しており、リッチモジュールの拡張が必要な​​シナリオに適しています。

Nginx vs. Apache:長所と短所を調べますNginx vs. Apache:長所と短所を調べますApr 27, 2025 am 12:05 AM

Nginxは、高い同時コンテンツと静的コンテンツの処理に適していますが、Apacheは複雑な構成と動的コンテンツに適しています。 1。NGINXは、交通量の多いシナリオに適した同時接続を効率的に処理しますが、動的コンテンツを処理するときは追加の構成が必要です。 2。Apacheは、複雑なニーズに適したリッチモジュールと柔軟な構成を提供しますが、並行性のパフォーマンスが低いです。

NginxとApache:重要な違​​いを理解するNginxとApache:重要な違​​いを理解するApr 26, 2025 am 12:01 AM

NginxとApacheにはそれぞれ独自の利点と欠点があり、選択は特定のニーズに基づいている必要があります。 1.Nginxは、非同期の非ブロッキングアーキテクチャのため、高い並行性シナリオに適しています。 2。Apacheは、モジュラー設計のため、複雑な構成を必要とする低変動シナリオに適しています。

Nginxユニット:主要な機能と機能Nginxユニット:主要な機能と機能Apr 25, 2025 am 12:17 AM

Nginxunitは、複数のプログラミング言語をサポートし、動的構成、ゼロダウンタイム更新、組み込みのロードバランシングなどの機能を提供するオープンソースアプリケーションサーバーです。 1。動的構成:再起動せずに構成を変更できます。 2。多言語サポート:Python、Go、Java、PHPなどと互換性があります。 4。ビルトインロードバランシング:リクエストは、複数のアプリケーションインスタンスに配布できます。

Nginxユニットvs他のアプリケーションサーバーNginxユニットvs他のアプリケーションサーバーApr 24, 2025 am 12:14 AM

nginxunitは、多言語プロジェクトや動的な構成要件に適した、apachetomcat、gunicorn、node.jsビルトインHTTPサーバーよりも優れています。 1)複数のプログラミング言語をサポートします。2)動的な構成リロード、3)高いスケーラビリティと信頼性を必要とするプロジェクトに適した組み込みの負荷分散機能を提供します。

Nginxユニット:アーキテクチャとその仕組みNginxユニット:アーキテクチャとその仕組みApr 23, 2025 am 12:18 AM

Nginxunitは、モジュラーアーキテクチャと動的な再構成機能により、アプリケーションのパフォーマンスと管理性を向上させます。 1)モジュラー設計には、マスタープロセス、ルーター、アプリケーションプロセスが含まれ、効率的な管理と拡張をサポートします。 2)動的再構成により、CI/CD環境に適した、実行時に構成をシームレスに更新できます。 3)多言語サポートは、言語ランタイムの動的なロードを通じて実装され、開発の柔軟性が向上します。 4)イベント駆動型モデルと非同期I/Oによって高性能が達成され、高い並行性の下でも効率的なままです。 5)申請プロセスを分離し、アプリケーション間の相互の影響を減らすことにより、セキュリティが改善されます。

Nginxユニットの使用:アプリケーションの展開と管理Nginxユニットの使用:アプリケーションの展開と管理Apr 22, 2025 am 12:06 AM

nginxunitを使用して、アプリケーションを複数の言語で展開および管理できます。 1)nginxunitをインストールします。 2)PythonやPHPなどのさまざまなタイプのアプリケーションを実行するように構成します。 3)アプリケーション管理に動的構成関数を使用します。これらの手順を通じて、アプリケーションを効率的に展開および管理し、プロジェクトの効率を向上させることができます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

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

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール