Nginx導入vue静的プロジェクトリフレッシュ404の問題

1395 ワード

前にnginxがvue静的プロジェクトを配置していない文章を書いた=>転送ゲートがリフレッシュを発見したとき404の問題が発生する
以前のNginx構成は次のとおりです.
server {
		listen       80;
		server_name  localhost;
		
		#charset koi8-r;
		
		#access_log  logs/host.access.log  main;
		
		location / {
		    root   D:/police/terminal-client; 
		    index  index.html index.htm;
		}

		location /api/ {
	    	proxy_pass      http://localhost:8888/;
            proxy_redirect  off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

ビジネスが進むとurlが変わり、ログインページなど
  • エントリurl:http://localhost/
  • ログインYes url:http://localhost/login

  • このとき、ページnginxをリフレッシュすると404が与えられます
    構成の変更
    構成try_を追加files $uri $uri//index.html;
    location / {
       root   D:/police/terminal-client; 
       try_files $uri $uri/  /index.html;
       index  index.html index.htm;
    }
    

    try_files
    try_でfiles $uri $uri//index.html; 例として、ユーザが要求するhttp://localhost/loginの場合、ここの$uriは/loginです.try_filesはハードディスク(HDD)にこのファイルを探してみます./$root/login($rootはWordPressのインストールディレクトリ)というファイルがある場合は、このファイルの内容をユーザーに直接送信します.ディレクトリにloginというファイルがないのは明らかです.それから$uri/を見て、/$root/login/というディレクトリがあるかどうかを見ます.また見つからないとfall backからtry_filesの最後のオプション/index.htmlは、内部の「サブリクエスト」、すなわちnginxがHTTPリクエストを開始することに相当する.http://localhost/index.html.