vue,react,angular本地配置nginx 環境單頁面應用

1、原由：項目使用VUE，和react。構建單頁面應用。在nginx的環境下只有一個index.html入口。這時候默認可以訪問到vue，和react 路由

配置中的首頁。內部鏈接也可以跳轉可是不能給刷新也面。刷新頁面後就爲變爲404頁面。

2、緣由：nginx 在解析路徑的時候：好比： localhost/a     這個路由。其實nginx 在解析路徑 時候。爲去root根路徑下去找a文件。可是找不到。全部就會報錯。

可是在單頁面應用中localhost/a 實際上是 VUE, 和react  內部制定的路由規則。這時候。就出現問題了。該如何配置呢？ 

 

3、配置文件。

 server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /home {
            rewrite .* /index.html break;
            root   html;
        }
        location /strategy {
            rewrite .* /index.html break;
            root   html;
        }
        location /wealthMange {
            rewrite .* /index.html break;
            root   html;
        }
        location /aboutUs {
            rewrite .* /index.html break;
            root   html;
        }
        location /contacts {
             rewrite .* /index.html break;
             root   html;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }    
    }

經過rewrite .* /index.html break;把一切path重寫爲/index.html,break很重要,它使得url的匹配結束，最終服務返回的文檔實際上是/htm/index.html。

那個break決定了瀏覽器裏的url是不變的，而http響應的文檔其實就是index.html，而瀏覽器上的path，會自動的被vue-router處理，進行無刷新的跳轉，咱們看到的結果就是path對應了那個頁面！

location /home {
            rewrite .* /index.html break;
 root html; }
當咱們瀏覽器輸入這樣 localhost/home 是 重定向爲 rewrite .*/index.html break; root html; 至關於咱們home 頁面。就樣就OK 啦。

4、Apache 下的單頁面應用配置

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

.htaccess   把 這個文件的內容改成上面的代碼就能夠了。

5、nginx的簡單配置方法

location / {
  try_files $uri $uri/ /index.html;
}

一行代碼就能夠搞定。不用寫那麼多路由規則啦。

哈哈是否是很爽啊。？？？