プロジェクトのパッケージ化とオンライン展開

デフォルトのポート番号は何ですか: 80

プロジェクトをビルドするには、コマンド package.json を実行します

実行するたびに、プロジェクトのルートディレクトリにdistファイルが生成されるので、存在する場合は削除して再作成します。

ローカル シミュレーション オンライン/テスト

nginx を使用して本番環境をシミュレートする

高性能の HTTP およびリバース プロキシ Web サーバーです。

自分のコンピューターでnginxが配置されているパスには中国語を使用できないことに注意してください

2. 設定ファイル（nginx.conf）を修正後、必ずnginxを再起動してください

3. タスク マネージャーに 2 つの nginx がある限り、複数回ダブルクリックしないでください。nginx を終了するときは、右クリックして次のどれを終了しますか (サブプロセス、次に上記のメイン プロセスを終了します)

このnginxファイルでは、現在2つのファイルのみを使用しています

nginx-1.17.6\conf\nginx.conf ファイル: nginx サーバーを構成する

nginx-1.17.6\logs\error.log nginx がエラーを報告し始めたら、ここにアクセスしてエラーを表示できます

まず、構成ファイルを見てみましょう:構成ファイル内のコメントはすべて #

プロジェクトはルート ディレクトリにデプロイされます

server { 
        listen 8887; #リスニング ポート番号
        server_name localhost; #アクセス アドレス
        location / { #このサーバー ルート html のルート ディレクトリにアクセス
            ; #プロジェクト インデックスのパスにアクセス
            index.html index.htm; #以下のファイルにアクセスpath 
            try_files $uri $uri/ /index.html break; 
        } 
 }

ダブルクリック/コマンドラインでnginx.exeファイルを実行

タスクマネージャーを開き、このファイルが存在するかどうかを確認して、起動が成功したことを証明します

次に、上記の構成に従って http://localhost:8887 にアクセスすると、コンテンツが html フォルダーに読み込まれます. パッケージ化およびビルド後に dist ディレクトリ内のアイテムを次のアドレスにコピーするだけでアクセスできます.

プロジェクトはサブディレクトリ/サブアプリにデプロイされます

server { 
        listen 8887; #リスニングポート番号
        server_name localhost; #アクセスアドレス
        location /suming { #サーバーのルートディレクトリ下の/sumingフォルダ配下のプロジェクトサブディレクトリにアクセス
            #root "E:/1711A/newnear_pro/dist" ; #アクセスのルートパス
            #root "E:/1907A/bwonline/dist"; #アクセスルートのルート
             html; 
            index index.html index.htm; #try_files というルートパス以下のホームページ
           $uri $uri/ / summing/index.html; 
        } 
 }

1. nginx の構成で、次の try_files が指すルート ファイルのパスに、サブディレクトリ/suming のパスを追加する必要があります。

2 プロジェクトの webpack 構成 (vue.config.js) で、パッケージ化された構成をルート ディレクトリに追加します。

3.ルーティングフォルダーの下にベースを追加します

const router = new VueRouter({ 
  mode: 'history', 
  base: '/suming', //Vue は nginx のルート ディレクトリからコンポーネントを検索することによって発生します。そのため、ルート検索の開始点を変更する必要があります
  //ベース: process.env.BASE_URL,

module.exports = defineConfig({ 
  publicPath: process.env.NODE_ENV === 'プロダクション' ? '/suming' : '/', 
})

4: nginx のルート ディレクトリの下に新しいサブアプリケーション フォルダーを作成するか、webpack 構成を追加します。

アップロード サーバー

プロジェクトをサーバーにアップロードするには、FileZillaという処理ツールが必要です (同じツールには FTP XShell ssh pwoershell もあります。fileZilla を覚えておく必要があります)。

 会社は、プロジェクトがアップロードされる場所も教えてくれます。

私のサーバーで /www/wwwroot/www.lovetang.top/CRMEB-master/crmeb/public

もちろん、コマンドラインからサーバーにリンクすることもできます (非推奨)。

sftp [email protected] パスワードを入力すると、Linux の自己保護メカニズムが見えないため、入力内容が表示されません。

プロジェクトの立ち上げ中に発生した問題:

1. 弊社はヒストリーモードです. プロジェクトを立ち上げると, プロジェクトを更新すると 404 エラーが報告されます. その際, インターネットで解決策を見つけ, nginx に try_files を設定しました. 実際には同等です.ページが更新されたときに、ルート ページにリダイレクトし、ルーティング テーブルをフォルダーとして解析するのではなく解析します。

ルーティングはハッシュと履歴の 2 つのモードに分けられ、そのうち 404 は履歴がオンラインの場合にのみ報告されます。