vueプロジェクトが開発されたら、プロジェクトをパッケージ化してオンラインにする必要があります。本番環境プロジェクトをローカルでプレビューしたいと考えています。（以下は、例としてvue-cliスキャフォールディングによって生成されたプロジェクトを取り上げています）
パブリッシングサーバー
1.パッケージングコマンドを実行します
npm run build実行後、distフォルダーが生成され、distフォルダーがサーバーに公開されます。
nginxのプロキシを介してアクセスします。
まず、Emiがパッケージ化される前のローカルコード：
npm run buildを実行した後、ローカルプロジェクトのルートディレクトリの下にdistディレクトリが生成されます。
次に、nginxプロキシを介してアクセスします。NGINXの構成は次のとおりです。
サーバー{ リッスン80; server_name lch.vue.com; 場所/ { proxy_pass http://127.0.0.1:8091; proxy_http_version 1.1; proxy_redirect off; proxy_connect_timeout 30; proxy_set_headerホスト$ host：$ server_port; proxy_set_header X-Real-IP $ remote_addr; proxy_set_header X-Forwarded-For $ proxy_add_x_forwarded_for; #proxy_cache cache_one; proxy_cache_valid 200304 24h; proxy_cache_valid任意の10m; add_headerNginx-キャッシュ "$ upload_cache_status";
proxy_next_upstreamエラータイムアウトinvalid_headerhttp_500 http_502 http_503 http_504;
}
}
サーバー{ gzipオン; gzip_static on; gzip_min_length 50k; gzip_comp_level 1; gzip_types text / plain application / javascript application / x-javascript text / css application / xml text / javascript application / x-httpd-php; gzip_vary on; gzip_disable "MSIE [1-6] \。"; gzip_buffers 32 4k; gzip_http_version 1.0; 8091を聞く; access_log /var/log/nginx/lch.vue.com.log; server_name 127.0.0.1; 場所/ { ルート/ htdocs / demo / vue-demo / dist; try_files $ uri $ uri / @router; インデックスindex.html; }
場所〜（favicon.ico）{ 365dで有効期限が切れます; } 場所〜* \。（js | css | jpeg | jpg | bmp | gif | png | doc | docx | xls | xlsx | rar | zip | svg | otf | eot | svg | ttf | woff | woff2）$ { root / htdocs / demo / vue-demo / dist /; 30日で有効期限が切れます。 } location @router { rewrite ^。* $ /index.html last; }
}
nginxを保存して再起動します。もちろん、私はローカルドメイン名であり、ホストをバインドする必要があります。
もう一度アクセスしてください：lch.vue.com、次のページを見ることができます：
この場合、vueフロントエンドプロジェクトはパッケージ化されており、Nginxプロキシを介してアクセスできます。