序文
フロントエンド開発者として、コードを記述し、パッケージ化を最適化する必要があるだけでなく、オンライン展開もフロントエンドエンジニアにとって不可欠なスキルです。この記事では、最初から始めてパッケージ化し、プロジェクト全体をオンラインサーバー。最初の準備は、クラウドサーバーが必要になることです。
プロジェクトパッケージの最適化
プロジェクトのパッケージ化
プロジェクトのパッケージ化の場合、プロジェクトディレクトリでコマンドnpm run buildを直接入力する
と、パッケージ化されたファイルであるプロジェクトディレクトリにdistという名前のファイルが生成され、このファイルを展開できることがわかります。
プロジェクトの最適化
vueプロジェクトマネージャーを使用して、プロジェクトを最適化できる場所を確認できます
。cmdにvue uiと入力して、プロジェクトマネージャーを開き、パッケージ化する必要のあるプロジェクトを開きます。
タスク-「ビルド-」実行
コンパイルとパッケージ化が成功すると、distファイルが上記の方法のようにディレクトリに表示されます。
[分析]をクリックすると、最適化のためにプロジェクトのコンパイル関連情報を表示できます。たとえば、ここではすべてのelement-uiを導入したので、メモリ比率が比較的高く、部分的な導入に変更して、パッケージサイズを縮小し、運用効率を向上させることができます。
プロジェクトのオンライン展開
プロジェクトをパッケージ化してdistフォルダーを取得するには、2つの方法があります。次に、このフォルダーをサーバーに公開する必要があります。展開には、nginxをプロキシとして使用することを選択します。
まず、サーバーにnginxをインストールします。nginxのインストールと使用については、サーバーに
nginxをインストールするための詳細な手順について、私の記事（以下のリンク）を参照してください。
ここから、デフォルトで全員がnginxをインストールします。ここでは、サーバーに接続するために2つのツール、xshellとXftpを使用します。これらは比較的使いやすく、ここでは説明しません。
プロジェクトをサーバーにアップロードします
Xftpを使用してサーバーに接続し、パッケージ化されたdistファイルをサーバーフォルダーにドロップします
nginxを構成する
次に、サーバーのnginx / confにnginx.confと入力します。これは、その構成ファイルであり、構成してファイルを編集し、
httpでサーバーのコンテンツを検索して書き込みます。
- リッスン後にリスニングポート番号を入力します。ポートを解放することを忘れないでください
- server_nameの後に、サーバーのパブリックアドレスを入力します
- その場所に、ルートの後にdistファイルが保存されている場所を入力します
server {
listen 3434;
server_name 1.xxx.56.xxx;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /root/Student_vue/dist;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
変更後、保存してnginx / sbinディレクトリに戻り、コマンド./nginxを入力してnginxを実行し
、ブラウザで上記のアドレス1.xxx.56.xxx:3434にアクセスします。
ログインページに入ることができますが、ログインをクリックするとエラーが発生します
。慌てる必要はありません。nginx.conf構成ファイルをもう一度入力し、インターフェイスのプロキシを構成して、次
のコード行を追加してください。ルーティングロケーション/、および場所/ api /を下に追加して、インターフェイスプロキシを設定します
location / {
root /root/Student_vue/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://1.xxx.xx.64:5004/api2/;
}
ファイルを保存し、nginx / sbinディレクトリに入り、コマンド./nginx -s reloadを入力して、nginxサービスを再起動し、アドレスにアクセスして、完全にOK
やっと
すべてのステップが実行可能です。展開プロセス中に問題が発生した場合は、以下にメッセージを残して話し合うことができます〜