Vue プロジェクトのフロントエンド デプロイ - nginx メソッド

1. サーバーを準備し、nginx をダウンロードしてインストールし、起動します

インターネットで記事を見つけて、ダウンロードしてインストールした後、nginx を起動します。

2. Vue プロジェクトのコンパイルとパッケージ化

プロジェクトのルート ディレクトリで npm run build を実行し、コンパイルしてパッケージ化します

。 パッケージ化が完了すると、プロジェクトのルート ディレクトリに追加の dist ディレクトリが作成されます。

3. dist ディレクトリをサーバーにアップロードします

4. nginx インストールディレクトリの nginx.config ファイルを設定します。

nginx がプロキシとして使用されているため、vue.config.js のプロキシは有効になりません。nginx を使用してリバース プロキシを設定し、設定後にファイルを保存します。

server {
    
    
        listen       3012; #访问端口
        server_name  localhost;
        location / {
    
    
       	   root /xx/xx/xx/dist; #前端dist包地址
           index  index.html index.htm;
	       try_files $uri $uri/ /index.html;
		}
        location /ele/ {
    
    
		proxy_set_header x-forwarded-for  $remote_addr;
		proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
		}
	 

	charset utf-8;
    }

5.nginxを再起動します

service nginx restart または nginx -s reload を使用して nginx を再起動します

6. アクセスアドレス

アドレスはサーバー アドレス、ポートは nginx によって設定されたアクセス ポートです。
私は 3012 を設定したため、単に ip:3012 とします。ホームページに他のルートがある場合は、ip:3012/router を使用できます。たとえば、ホームページのルートは /index で、アクセス アドレスは ip:3012/index です。