Vue プロジェクトをサーバーにデプロイする際の問題を解決する方法

この記事では主に、Vue プロジェクトをサーバーにデプロイする際の問題の解決策を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

多くの友人が Vue-cli によってインストールされたスキャフォールディングを使用して開発すると、プロジェクトは開発環境では正常に実行できますが、本番環境に入り、コンパイルしてパッケージ化して、これをサーバーに追加すると、プロジェクトは正常に動作しなくなり、空白ページやルーティング ジャンプ 404 などの問題が発生します。このような問題が発生した場合でも、パニックに陥る必要はありません。正しい構成とバックエンドの簡単な連携によって解決できます。

パッケージ化する方法

Vue-Cliに基づいて、パッケージ化操作はnpm run buildを通じて実行されます

デプロイ方法

1. Vue-Cliに基づいてパッケージ化されたリソースは、通常、distディレクトリにstaticがありますディレクトリとindex.htmlファイル、これら2つのファイルをサーバーに直接スローできます

2. しかし、場合によってはdistファイルをサーバーに直接スローすることもあります

発生する問題

1. 梱包 到着後のサーバーでリソースの参照パスに問題があります

2. サーバーにパッケージ化した後、空白ページの問題が発生します

3. サーバーにパッケージ化した後、インポートされたCSSのタイプがインターセプトされ、「 text/plain"

4. サーバーにパッケージ化した後、ルートリフレッシュ 404 の問題が発生します

次の著者は、Vue プロジェクトをコンパイルして通常のデプロイメントにパッケージ化した経験に基づいて、これらの問題を解決する方法を説明しますサーバーの。

1. フロントエンド構成:

①、ルーター構成 - ルート開始を指定します (開発モードでは、Vue プロジェクトは、nodeJs を使用して webpack によって生成されたローカル サーバーのルート ディレクトリに配置されますが、実際にはサーバー, プロジェクトは絶対にルートディレクトリに配置されないので、ルーターのベースを指定する必要があります

router

プロジェクトデプロイのサーバーフォルダーパスは事前にバックエンドと話し合ってください

②,設定をコンパイルしてパッケージ化します

Enter config -- >index.js

build

③、パッケージ化にnpm run buildを使用します。これでフロントエンドが実行できる設定は完了しました

2 番目に、バックエンド構成:

ルーティング ジャンプが 404 で表示されます。その理由は、サーバーが指定されたパスでリソースを見つけられない場合、バックエンドがこの仮想フロントエンド ルートに対して何も処理を行わないためです。クライアントには 404 のみを返します。

解決策 (Apache): URL を書き換えます---Vue プロジェクトが配置されているサーバー フォルダー内のパスを書き換えます。例:

leibo.group/pcMall/.... leibo.group/pcMall/ に書き換えます。 Index .html

.hatccess

特定のApacheにより、allowoverride、URL書き換えが可能になり、バックエンドは数分で解決できます

他のタイプのサーバーの場合は

https://router.vuejs.orgを参照してください/ zh-cn/essentials/history-mode.html

概要: シングルページ展開サーバーでは、実際には、フロントエンド ルーティングを使用してユーザー インターフェイス コンテンツの変更を制御するという考え方の変更が行われます。上記は次のとおりです。筆者がプロジェクトデプロイメントサーバーで行ったこと いくつかの経験、説明に不適切な点があれば、ご指摘ください。

上記は私があなたのためにまとめたものです。

関連記事:

vueでaxiosセカンダリカプセル化を実装する方法

WeChatアプレットでオーディオコンポーネントを使用する方法

ビデオコンポーネントを使用してWeChatアプレットでビデオを再生する方法

WeChat アプレットにダウンロードの進行状況バーを実装する方法

JavaScript で携帯電話番号検証ツール PhoneUtils を使用する方法

以上がVue プロジェクトをサーバーにデプロイする際の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。