vue-cliビルドプロジェクトにアクセスするためのNginxデプロイメントメソッド

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

vue-routerの公式サイトから、ヒストリモードで構築されたvueプロジェクトがパッケージ化されている場合、バックエンド設定のサポートが必要です。ハッシュは不要ですが、アドレスには#/ suffixが付きます。 ハッシュモードを使用して構築されたプロジェクトをパッケージ化した後、Webstormなどのソフトウェアを使用してアクセスを開くだけで済みます。

しかし、履歴モードで構築したプロジェクトにはバックグラウンドテクノロジが必要です。プロジェクトを展開するためにnginxリバースプロキシを選択しました。 具体的な実践は以下の通りです:

1、バックグラウンド・サーバー・オブジェクトを作成する


upstream mixVueServer{ 
server baidu.com;#这里是自己服务器域名 
} 

2、アクセスポートとリバースプロキシルールを作成する


server { 
listen    8082; 
server_name localhost; 
location / { 
root  E:/mix_vue/dist;#定位到项目的目录 
#index index.html index.htm; 
try_files $uri $uri/ /index.html;#根据官网这规则配置 
} 
location ~ \.php${ 
proxy_pass http://mixVueServer;#根据后端语言做反向代理处理跨域问题 
proxy_set_header  Host  $host; 
proxy_set_header  X-Real-IP  $remote_addr; 
} 
error_page  500 502 503 504 /50x.html; 
location = /50x.html { 
root  html; 
} 
} 

最後に、ダイレクトアドレスバーにポートアクセスを入力します。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ